webpack中导入vue和普通网页中导入vue的区别

普通页面导入Vue

0. 安装 vue 运行依赖
   cnpm i vue -S
1. 在 HTML 页面中，引入 script 标签
2. 在页面中创建一个 div容器
3. 创建一个 Vue 实例

---

在webpack 中导入Vue

在 webpack 中，在入口文件中，使用 import Vue from 'vue';导入的Vue构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供 像网页中那样引用的使用方式

注意：以上导入方式，不是完整的vue包，项目运行会报错。

导入方法：两种

包的查找规则：

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

注意： 通过以上规则，会查找到，使用 import Vue from 'vue'; 真正引入的 vue 文件。

---

方法一：

通过以上方法会查到 main 属性，例如：

简单粗暴的就是，把 main 修改为 "main": "dist/vue.js",
或者在入口函数引入：import Vue from '../node_modules/vue/dist/vue.js'

---

方法二：

1. 在入口文件中导入：

import Vue from 'vue';

2. 在 webpack 的配置文件 webpack.config.js 中配置，如图：