开发者学堂课程【前端自动化构建工具 Webpack：区分 webpack 中导入 vue 和普通网页使用 script 导入 Vue 的区别】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/587/detail/8228
区分 webpack 中导入 vue 和普通网页使用 script 导入Vue 的区别
目录：
一、如何在 webpack 创建的项目中，使用 Vue 进行开发
二、在 使用 webpack 构建的 vue 项目中使用模板对象
一、如何在 webpack 创建的项目中，使用 Vue 进行开发
1、打开一个新的项目，找到代码文件夹，在代码文件夹里面找到
webpack-syudy 项目，右键打开项目。
//入口文件
Console.log(‘ok’)
先运行一下，看看结果有没有ok
里面有ok,就证明项目可以正常运行。
2.如何在 webpack 创建的项目中，使用 Vue 进行开发
1）复习 在普通页面中如何让使用vue:
·使用 script 标签，引入 vue 的包(script导入的包功能最全)
·在index页面中，创建一个id为app div容器
·通过new Vue得到一个vm的实例
2）在 pack 里面使用 vue:
① 先安装一个包
PS C:\VusersUliulongbinNDesktopday6代码182.webpack vue1>npm i vue-s
② 把vue这个包安装到项目并且运行起来：
[.............]/normalizeTree:sill install loadCurrentTree
npm NARN 01.webpack-study@1.0.0 NO description
npm IARN01.webpack-study@1.0.0 NO repository field.
PS C:UsersliulongbinDesktoplday61/14102.webpack-vue
运行结果：
[HPR] Waiting for update signal from WDS ...ok
[WDS] Hot Module Replacement enabled.
3.在 weback 中尝试使用 vue:
1）在 weback 中尝试使用 vue:
Import vue from‘vue’ 得到vue的构造函数
Var xm=new vue({ 创建vue实例
el:’#app’挂载节点
Data:{
Msg:’123’
}
}}
Var vm = new Vue({
el：’#app’
data:{
msg:’123’
}
})
”viewport” content=”width=device-width,initial-scale=0.1”>
”X-UA-Compatibel” content=”ie=edge”>
Document
</code><code><span class="lake-fontsize-1515" style="color: black;">”<span>./lib/vue-2.4.0.js</span>”<span>>
<--这是容器-->
”app”>
{{msg}}
运行结果：
you are using the runtime-only build of vue。提醒正在使用runtime_only 运行时的包，并不是最全的vue的包，在网页中通过 script 标签导入的 vue 的包是最全的，但是在 import 导入的包所得到的全局的vue不一样，这个vue 功能不全。
import Vue from‘Vue ’的vue功能不全，所以不支持这种用法。
//注意：
在 webpack 中，使用import Vue from‘Vue ’导入的 vue 构造函数，功能不完整，只提供了runtime-only的方式，并没有提供像网页中那样的使用方式。如果就使用网页中提供的方式：
就需要修改vue包得到的对象
举例：
Var vue=require(‘vue’)在require vue的时候有一个查找规则。
Import Vue from ‘vue’
2）回顾 包的查找规则：
1、找根本根目录有没有node_modules 的文件夹
2、找 node_modules 中根据包名，对应的 vue 文件夹
3、在vue文件夹中，找一个叫做 package.json 的包配置文件
4、在 package.json 文件中，查找一个 main 属性
【main属性指定了这个包在被加载的时候的入口文件。如果要 import 这个 vue 没有问题，那 import 是哪个文件的就需要用 main 来指定。只要指定了main,那就是通过 main 指定的文件得到的。
】
找到main属性：
(vue函数就是从dist/vue.runtime.common.js中得到的，如果执行dist/vue.runtime.common.js这个文件，就会像外暴露一个对象)
3）怎样找 main 属性
第一步：打开 node_modules文件夹，
第二步：找到 vue 开头的文件夹，
第三步：在 vue 文件夹里面找到package.json 右键打开，
第四步：找 mian 属性
"license": "MIT",
'main": " dist/vue.runtime.common.js",'
（指向的属性前面没有带根路径，相对于当前这个文件来说有一个dist目录，vue这个文件就是从dist/vue.runtime.common.js这个文件里面得到的。
）
maintainers' :[
"name": "yyx990803",
"email": "yyx990803@gmail.com"
"module": " dist/vue.runtime.esm.js",
（·执行dist/vue.runtime.common.js这个文件就会向外暴露一个对象，暴露的对象就是vue）"name": "vue" ,
" optionalDependencies": 0,
"publish_ time": 1507926074556,
"readme": "ERROR: No README data found!"。
4）暴露的对象:
·在dist文件夹中，就有 dist/vue.runtime.common.js 这个文件。
·除了导入的这个文件的包，还有 vue.js文件，vue.js 文件就是在网页中用script标签导入的js.功能最全的是 vue.js。
·所以如果想用网页中的语法，就必须导入vue.js这个包。
·这两个包的体积是不一样的，一个是200kb,一个是273kb。
·vue.runtime.common.js 是严格版的，
怎样导入vue.js这个包：
5）导入vue.js这个包的方式：
·第一种（方式更优雅）：
直接把 mian 这个属性指向导入包的 runtime.common.js 这种方式是最简单的。或者可以给它一个路径：
Import vue from ‘../node_modules/vue/dist/vue.js’这样也可以。
运行结果：
123
(如果想使用最全的方式，就必须手动导入vue.js)
第二种：import vue from ‘vue’
直接导入vue,但是可以在webpack中添加一个节点，和plugins,module平级，加一个resolve
resolve:{修改vue被导入的时候的包的路径
alias:{//
"vue$": "vue/dist/vue.js "
}
}
运行结果：
123
所以这种方式也可以.
二、在 使用 webpack 构建的 vue 项目中使用模板对象
1.在wcbpack.config,ja中添加resolov属性
Resolov{
Alias{
‘vue$’:’vue.esm.js’
}
}
Module.exports={
Entry:path.join(_dirname,’./src/main.js’),//入口文件
Output:{//指定输出选项
}，
Plugins:[//所有webpack插点的配置节点
],
Module:{//配置所有第三方loader模块
}，
resolve:{
alias:{//修改vue被导入时候的报的路径
“vue$”:”vue/dist/vue.js”
