webpack搭建vue 项目的步骤(5)

日期：2020-05-11 栏目：程序人生浏览：次

上面红色字体的配置信息是告知webpack-dev-server，在localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。

让我们在package.json中添加一个script脚本,可以直接运行开发服务器(dev server)：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev":"webpack-dev-server --open",
  "build": "webpack"
 },

然后输入如下命令

npm run dev

启动完成后，浏览器会自动打开一个访问 http://localhost:8080/ 的页面

此时服务已启动成功。

字体的加载

字体的加载方式与图片的一样也是用url-loader，配置如下

{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000
  }
 }

vue-loader

在vue的开发过程中，通常我们需要写.vue结尾的文件即组件，如app.vue

<template>
  <div id="app">
    <img src="./images/logo2.jpg" alt="logo" >
    {{msg}}
  </div>
</template>
<script>
  export default {
    name:'app',
    data(){
      return {
        msg:"hello vue !!"
      }
    }
  }
</script>

该文件需要通过vue-loader来进行加载，现在我们需要做如下配置。通过 vue-loader 和vue-template-compiler来加载并编译.vue文件

npm install --save-dev vue-loader vue-template-compiler

webpack.config.js 中

{
  test: /\.vue$/,
  loader: 'vue-loader'
 }

为了在vue中引入对.vue的使用，我们需进行如下修改

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue demo</title>
</head>
<body>
  <div id="app">
  </div>
</body>
</html>

main.js

import Vue from 'vue'
import './styles/main.css'
import App from './app.vue'

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

app.vue

<template>
  <div id="app">
    <img src="./images/logo.png" alt="logo" >
    {{msg}}
  </div>
</template>
<script>
  export default {
    name:'app',
    data(){
      return {
        msg: 'hello vue !!'
      }
    }
  }
</script>

修改完成后运行 npm run dev 命令，获得如下效果的页面

webpack搭建vue 项目的步骤(5)

相关推荐