1 普通网页引入vue包

1. 使用 script 标签 ，引入 vue 的包
2. 在index 页面中，创建 一个 id 为 app div 容器
3. 通过 new Vue 得到一个 vm 的实例

2 webpack引入vue包

2.1 安装并导入

安装

npm i vue

导包

import Vue from 'vue'

在webpack中尝试使用 Vue需要注意： 在 webpack中， 使用 import Vue from 'vue'导入的Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供像网页中那样的使用方式；

在这里插入图片描述

2.2 导入解决问题

2.2.1 修改路径

解决方法，修改引入路径从node_modules中引入：

• import Vue from '../node_modules/vue/dist/vue.js'

包的查找规则：

1. 找项目根目录中有没有 node_modules 的文件夹
2. 在 node_modules 中 根据包名，找对应的 vue文件夹
3. 在vue 文件夹中，找 一个叫做 package.json 的包配置文件
4. 在 package.json 文件中，查找一个 main 属性(main属性指定了这个包在被加载时候的入口文件)

2.2.2 不修改路径

还是原来的导包方式：

import Vue from 'vue'

需要在webpack.config.js中添加一个节点：resolve属性，此属性与module，entry，output同级，其中有一个alias对象，vue$是指以vue结尾的请求发来时到此包vue/dist/vue.js下面去找

module.exports = {
  resolve: {
    alias: { // 修改Vue 被导入时候的包的路径
    "vue$": "vue/dist/vue.js"
    }
  }
}