6.1 引用vue.js
6.2 打包项目：错误信息
6.3 el和template区别
6.4 Vue组件化开发引入
6.5 .vue文件封装处理
6.6 组件引用组件
6.1 引用vue.js
npm install vue –save
注：因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖
接下来就可以使用Vue了
6.2 打包项目：错误信息
重新打包，会发现报错：
这个错误说的是我们使用的是runtime-only版本的Vue
1.runtime-only->代码中，不可以有任何的template
2.runtime-compiler->代码中，可以有template，因为有compiler可以用于编译template
所以我们修改webpack的配置，添加如下内容即可
重新打包，运行
6.3 el和template区别
正常运行之后，我们来考虑另外一个问题：
如果我们希望将data中的数据显示在界面中，就必须是修改index.html
如果我们后面自定义了组件，也必须修改index.html来使用组件
但是html模板在之后的开发中，我并不希望手动的来频繁修改，是否可以做到呢？
定义template属性：
在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容
这里，我们可以将div元素中的{{message}}内容删掉，只保留一个基本的id为div的元素
但是如果我依然希望在其中显示{{message}}的内容，应该怎么处理呢？
我们可以再定义一个template属性，代码如下：
重新打包运行：
那么，el和template模板的关系是什么呢？
在我们之前的学习中，我们知道el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等等。
而如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的模板。
这样做有什么好处呢？
这样做之后我们就不需要在以后的开发中再次操作index.html，只需要在template中写入对应的标签即可。
但是，书写template模块非常麻烦怎么办呢？
没有关系，稍后我们会将template模板中的内容进行抽离。
会分成三部分书写：template、script、style，结构变得非常清晰。
6.4 Vue组件化开发引入
在项目中创建名为vue的文件夹，创建JavaScript文件，取名为app。
app.js代码内容：
在main.js导入：
重新打包运行：效果一样。
现在有一个问题，就是app.js中模板和js没有分离。所以接下来创建如下图所示文件。
取名App
在main.js中导入App.vue
重新打包，发现报错
需要配置对应的loader
6.5 .vue文件封装处理
步骤一：安装vue-loader（对vue进行加载的）和vue-template-compiler（真正对vue进行编译的）
npm install vue-loader vue-template-compiler --save-dev
步骤二：修改webpack.config.js的配置文件
重新打包运行，发现报错：
在package.json中
改为13版本：
package.json修改了之后，要重新npm install：根据最新的版本重新安装node_modules
再重新打包运行：
接下来就可以组件发开发了！
6.6 组件引用组件
创建Cpn.vue
Cpn.vue代码内容：
在App.vue中引用Cpn.vue组件
重新打包运行：
如何省略文件的后缀呢？
是在webpack.config.js中
设置扩展名省略指定后缀之后，
重新打包运行：效果一样