webpack（六）：webpack配置vue

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中

设置扩展名省略指定后缀之后，

重新打包运行：效果一样