webpack3-配置vue

安装vue，因为后续在项目中也会使用vue,所以并不是开发时依赖

npm install vue --save

我们在编译完后会出现如下错误：

vue3.jpg

这是因为runtime-only ->代码中，不可以有任何的template
runtime-compiler ->代码中，可以有template,因为有compiler可以用于编译compiler
解决方法：添加alias别名来指定

vue7.jpg

安装vue-loader和vue-template-compiler

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

webpack.config.js文件中配置规则

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

目前所用到的loader及项目结构如下：

vue8.jpg

App.vue内容

>

cpn文件内容

入口文件内容：

// 1、使用common.js的模块化规范
const {add, mul} = require('./js/mathUtils.js')

console.log(add(20, 30));
console.log(mul(20, 30));

//2、使用ES6的模块化的规范
import {name, age, height} from "./js/info";

console.log(name);
console.log(age);
console.log(height)

//3、依赖css文件
require('./css/normal.css')

//4、依赖less文件
require("./css/special.less")

document.writeln("
你好啊
")

//5、使用vue进行开发
// 引入vue
import Vue from 'vue';

//引入app组件
import App from './vue/app.vue';

new Vue({
    //el和template的关系：template会替换el
    el:'#app',
    template:'',
    components:{
        App
    }
})

页面内容