vue学习之webpack配置vue

首先，利用npm 安装 vue

npm install vue --save

注释：

---npm i 插件 ，会把插件安装到node_modules目录中，不会修改package.json,

---npm i 插件 --save (-S) ，项目发布上线之后还会依赖用到的插件，没有这些插件，项目不能运行

---自动更改package.json 写入dependencies 节点

---npm i 插件 -g是不会更改package中的内容 但是可以存在node_modules目录中

---没有package.json 还怎么开开心心的 clone呢

---npm i 插件 --save-dev(-D) ，安装到开发依赖中，项目上线之后不会用到的插件，例如'babel-loader',项目解析完发布

---自动更改package.json 写入devDependencies 节点

第二，在main.js文件中，通过es6导入方法引入vue模块，并创建vue实例

import Vue from 'vue'

const app = new Vue({
    el: "#app",
    data:{
        message:'hello webpack'
    }
})

最后，在index.html文件中添加对应的挂载点

    

       
 {
    {message}}
    
    
    
 

注释：

1.此处 div要放在script之前，否则会报错‘’vue.esm.js:629 [Vue warn]: Cannot find element: #app“

2.webpack --mode development 编译后会出现错误，

vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

原因是vue有多个版本，不能使用runtime-only去编译有template标签的内容，解决方法：给vue指定包vue.esm.js

/需要引用npm的包,可以初始化npm的包 npm init
const path = require('path')
module.exports = {
    .....
    .....
    resolve: {
      alias:{
        'vue$' : 'vue/dist/vue.esm.js'
      }
    }
    
}