3.webpack 的import 导入网页和普通网页 scri

普通网页script引入 vue ：

1.使用 script 引入VUE 的包
2.在index.html 页面创建 id=app 的div
3.通过 new Vue 得到一个 vm 的实例,并配置

在 webpack 环境：

1.yarn add vue -s 安装运行依赖
2.在main.js 入口文件， 使用 import 引入 vue
3.创建 new Vue({})的 vm 实例

main.js 中：
import Vue from 'vue'
var vm=new Vue({
    el:'#app',
    data() {
        return {
            a:'zhangjian'
        }
    },
})

HTML 中：
 <div id="app">
        <p>{{a}}</p>
 </div>

注意：虽然都可以成功运行，但是出现报错！！

报错.jpg

报错的原因是，在webpack 中import Vue from 'vue' 进来的包是默认的阉割包，只提供了runtime-only的方式，没有提供像网页那样script进来的完全包，所以需要自己去修改，方式有两种。

---

首先 回顾包的查找规则：

1.在根目录下查找node_modules文件夹
2.在node_modules中查找vue的包
3.vue包内查找packge.json包的配置文件
4.在packge.json找到main属性，这个属性指定了这个包被加载时候对外的入口文件

• 经过我们的查找，会发现对外的文件不是完全包vue.js而是"main": "dist/vue.runtime.common.js",阉割包。

使用一下2种方法修改默认包 ：

1.指定import 的包路径：import Vue from '../node_modules/vue/dist/vue.js'

为了阅读不便，添加别名，使代码更简洁，
在webpack.config.js中添加resolve属性，引入路径可以不用更改：

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

2.修改 packge.json的main属性的指定包："module": "dist/vue.js",