为了缓解大家的审美疲劳，小编今天换了一个主角--Vue。今天的Vue和往常不一样，它可是抽取代码的葵花宝典。
【今天主要讲讲在项目中，如何对有关Vue的代码进行抽离】
一、基本抽取： el 和template
1.el 和template 抽取代码的原因
这个故事恐怕要追溯到很久很久以前，我们先来看看Vue最原始的面貌。
某天，index依旧跟往常一样，搬运着掰着手指头都数不过来的代码。
index:好累，我只是个手无缚鸡之力的弱女子，却承受了这个年纪不该承受的重量，生活不仅仅有诗和远方，还有数不胜数的代码...
template：哎呀呀，你怎么搬这么多的东西，快快停下来。这些重活粗活是我们干的，怎呢劳烦您动手呢。
【最最原始使用Vue的方法就是通过Vue实例中的el属性和.html页面绑定在一起，然后将要展示的东西通过{}引入到index界面中。但是用Vue开发的项目中，一般只有一个index.html页面，并且页面的内容很简单，后期也不需要、多次修改，可谓一言定终身啊】
2.抽取的方式
其实很简单，index只保留和el绑定的标签，而所有的数据显示都放在template中。效果图如下所示：
在这里，index只需要负责美丽，而template只需要负责搬运。原理是这样的：当el和template共存时，el绑定的模块就会被template替换掉。
就像本案例中，<div class="warp"></div>会被<div><h1>你今天学习了吗？</h1><button>学了</button><button>学了</button></div> 这些内容替代。
二、进阶抽取：组件抽取
1.组件抽取的原因
当我们把内容的显示都抽取到Vue实例中的template时，就会产生一个问题：如果显示的内容很多很多，Vue实例中的代码量就会很多很多，不利于维护，所以我们最好将template的内容抽取到一个组件中去
2.组件抽取的方式
将Vue实例中的template内容放到另外一个组件，最后在Vue实例的模块中引用该组件即可。比如：
import Vue from 'vue'
const app = {
template:`
<div>
<h1>你今天学习了吗？</h1>
<button>学了</button>
<button>学了</button>
</div>
`,
data(){
return {
message:"Hello,Webpack"
}
}
}
new Vue({
el:".warp",
template:'<app></app>',
components:{
app
}
})
在入口函数main.js中，声明了一个叫app的子组件，将父组件要显示的html元素和数据都放到了子组件中，然后在父组件的模块使用子组件。
这里一定要注意的是，版本问题！！版本问题！！版本问题！！重要的事情说三遍！如果你的webpack是3.0版本的，babel-loader，babel-core，babel-preset可以参考小编的版本：
通过 npm install babel-loader@7 babel-core babel-preset-es2015 安装，安装成功的结果如下：
当然也可以通过当前目录的package-json查看相应的版本信息
三、模块化抽取
1.模块化抽取的思想
通过上面组件的抽取，我们可以看出组件app是一个对象。模块化抽取的思想就是将app的内容单独抽取到另外一个.js文件中，经过export导出之后再由import导入到入口函数中。
2.具体步骤：
① 创建.js文件
该文件主要存放app组件内部的所有内容，比如：
创建了名字为app的js文件，然后通过export导出。
② 导入js文件
在入口函数main.js中通过import导入app.js文件。以后想要修改app的内容时，只需要到app.js文件修改即可。要记得注意路径问题。
四、Vue文件抽取
1.抽取的原因
经过上面的模块化抽取之后，仍旧有不足，就是模板和js代码时写在一块的，不容易区分。因此，为了将模块和js代码相分离，我们可以采用.vue文件.
2.抽取过程
① 创建.vue文件
② 书写相应的代码
<template>
<div>
<h1>你今天学习了吗？</h1>
<button>学了</button>
<button>学了</button>
</div>
</template>
<script>
data(){
return {
message:"Hello,Webpack"
}
}
</script>
<style>
h1{
color:red;
}
</style>
在Vue文件中，将模板相关的代码写在template中；将js相关的代码在写script脚本中；将css样式相关的写在style中。如此一来就实现了各个功能代码的分离。
③ 运行 .vue文件
Vue文件是不能直接在浏览器中被识别的，也需要借助loader，因此在运行.vue文件之前安装和配置。
3.1 安装 vue-loader
在终端中输入命令：npm install --save-dev vue-loader vue-template-compiler
vue-loader 只是负责加载.vue文件，而真正实现编译的是vue-template-compiler
3.2 配置 vue-loader
在webpack.config.js文件中配置下面的代码：
{
test:/\.vue$/,
use:['vue-loader']
}
但现实总是残酷的。如果你的vue-loader 版本大于14 ，就需要安装插件才可以运行vue文件，如果不想安装插件，可以降低vue-loader的使用版本。
