1、安装依赖Vue包：cnpm install vue --save
PS：不是安装开发时依赖，所以不需要加上-dev
默认会安装最新版本的vue包。
2、使用vue进行开发：在main.js应用vue语言进行开发
// 引用vue
import Vue from 'vue'
// 使用vue
const app = new Vue({
el: '#app',
data: {
message: 'Hello Webpack'
}
})
然后在index.HTML进行引用：
但是在浏览器中并未正常显示：
原因是vue里面有两种模式：
1、runtime-only ----> 代码中，不可以有任何的template，打包时默认是此情况；
2、runtime-compiler ----> 代码中，可以有template，因为有compiler可以用于编译template。
所以webpack进行配置指定compiler 版本（默认是引用vue.runtime.esm.js）：
然后重新打包代码，运行成功：
el与template的区别：
一般情况下，vue是做单页面开发的，即为SPA（simple page web application），也就是说一个工程里面只有一个index.html文件，然当也可以多页面，就是通过vue-router路由进行多页面开发。
所以我们在开发的过程中，我们一般不去修改index.html这个文件，只是在这文件引用一下app即可，至于app里面需要展示什么内容，则在js代码中进行实现：
js代码中定义一个template的属性，然后在里面实现界面需要展示的内容，这时候template的内容会替换掉index中的app的内容：
重新打包运行情况：
PS：可以将Vue实例中template内容抽离出来到一个组件里面：
然后这个组件对象，又可以进一步抽离出来，集中放在一个vue的代码包里面：
然后在需要用到此App对象的js文件中导入此对象即可：
所以，以后需要进行开发或修改app对象的代码时，就可以在app.js这里进行修改就可以了。
当然这个还不是最后抽离，还可以将app.js的内容进一步抽离出为app.vue文件，这样就更清晰。后期我们在开发或修改代码的时，只对这个文件进行维护即可：
然后在main.js中导入此文件：
当然，用到这个Vue的环境，在打包项目的时，还需要进行环境的配置，否则打包会报错：
cnpm install vue-loader vue-template-compiler --save-dev 进行安装：
然后修改webpack.config.js的配置文件：
{
test: /\.vue$/,
use: ['vue-loader']
}
但是在打包时，还是发生错误：
原因是vue-loader在13版本之后需要安装一个插件，所以可以直接把配置文件修改版本，然后重新安装修改后的版本：cnpm install ：
最后重新打包，测试运行成功。
PS：文字的颜色变成了绿色，是因为在app.vue文件中有个样式，在样式那边指定了这个文字的颜色
通过此方法，我们就可以实现组件化开发。例如，在项目中新增一个子组件：
在App.vue中注册引用子组件Cpn：
重新打包，测试运行：
