1.参考之前博文webpack的使用，搭建目录结构，安装好webpack和之前提到过的配置工具。
2.安装Vue
cnpm i vue -S
3.导入vue包
import Vue from 'vue'注意：在webpack中，使用 import Vue from 'vue' 导入的vue构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供像网页中那样的使用方式；
回顾包的查找规则：
（1）.找 项目根目录中有没有 node_modules 的文件夹
（2）.在node_modules中，根据包名，找对应的vue文件夹
（3）.在vue文件夹中，找一个叫做package.json的包配置文件
（4）.在package.json文件中，查找一个 main 属性，main属性指定了这个包在被加载的时候 的入口文件
所以我们根据这个规则，找到main属性，发现，它是指向的是vue.runtime.common.js：
"main": "dist/vue.runtime.common.js"
有三种方式：
第一种最简单的就是直接把main属性改成 "main": "dist/vue.js"
第二种就是在main.js换导入的文件的路径：
import Vue from '../node_modules/vue/dist/vue.js'
第三种：
在webpack.config.js增加一个配置（与modules平级） ：
resolve:{
alias:{
"vue$":"vue/dist/vue.js"
//在导入包的时候，以vue结尾的，都到vue/dist/vue.js这个目录里面去找
}
}
4.使用vue组件
（1）在vue中结合render函数渲染指定的组件到容器当中去
1.在src目录下面新建一个login.vue的文件
由三部分构成：
<template>
<div><h1>这是登录组件</h1></div>
</template>
<script></script>
<style></style>
2.在main.js中导入login组件
import login from './login.vue'
注意：默认webpack无法打包.vue文件，需要安装loader
cnpm i vue-loader vue-template-compiler -D
在配置文件中，新增loader配置项
{test:/\.vue$/,use:'vue-loader'}
注意：Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴随 VueLoaderPlugin的
所以我们要在这两个的基础上再去下载这个插件cnpm i vue-loader-plugin -S
然后在webpack.config.js文件中增加：
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// ...
plugins: [
new VueLoaderPlugin()
]
}（配置了之后，npm run dev 运行，发生了Error: Cannot find module 'vue-loader/lib/plugin' 这个错误
我又cnpm uninstall vue-loader-plugin 了，uninstall之后，又可以了（这些配置没删除），我没注意文件有什么变化了，忘记了，现在有vue-loader这个文件了，继续）
3.main.js中注册组件
用components的方式注册组件
var vm=new Vue({
el:'#app',
data:{
msg:'123'
},
methods:{},
components:{
login
}
})
用render的方式渲染组件
var vm=new Vue({
el:'#app',
data:{
msg:'123'
},
methods:{},
// components:{
// login
// }
// render:function (createElements) {
// return createElements(login)
// }
render:c=>c(login)
})
4.index.html中使用组件
<div id="app">
<p>{{msg}}</p>
<login></login>
</div>
5.总结梳理： webpack 中如何使用 vue :
1. 安装vue的包： cnpm i vue -S
2. 由于 在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装 能解析这种文件的 loader
cnpm i vue-loader vue-template-complier -D
3. 在 main.js 中，导入 vue 模块 import Vue from 'vue'
4. 定义一个 .vue 结尾的组件，其中，组件有三部分组成： template script style
5. 使用 import login from './login.vue' 导入这个组件
6. 创建 vm 的实例 var vm = new Vue({ el: '#app', render: c => c(login) })
7. 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域；
