为了缓解大家的审美疲劳，小编今天换了一个主角--Vue。今天的Vue和往常不一样，它可是抽取代码的葵花宝典。
【今天主要讲讲在项目中，如何对有关Vue的代码进行抽离】

image.png

一、基本抽取： el 和template

1.el 和template 抽取代码的原因

这个故事恐怕要追溯到很久很久以前，我们先来看看Vue最原始的面貌。

image.png

2.抽取的方式

  其实很简单，index只保留和el绑定的标签，而所有的数据显示都放在template中。效果图如下所示：

image.png

  在这里，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
    }
})

image.png

  在入口函数main.js中，声明了一个叫app的子组件，将父组件要显示的html元素和数据都放到了子组件中，然后在父组件的模块使用子组件。

这里一定要注意的是，版本问题！！版本问题！！版本问题！！重要的事情说三遍！如果你的webpack是3.0版本的，babel-loader，babel-core，babel-preset可以参考小编的版本：

通过 npm install babel-loader@7 babel-core babel-preset-es2015 安装，安装成功的结果如下：

image.png

当然也可以通过当前目录的package-json查看相应的版本信息

image.png

三、模块化抽取

1.模块化抽取的思想

  通过上面组件的抽取，我们可以看出组件app是一个对象。模块化抽取的思想就是将app的内容单独抽取到另外一个.js文件中，经过export导出之后再由import导入到入口函数中。

2.具体步骤：

① 创建.js文件
该文件主要存放app组件内部的所有内容，比如：

image.png

image.png

image.png

四、Vue文件抽取

1.抽取的原因

  经过上面的模块化抽取之后，仍旧有不足，就是模板和js代码时写在一块的，不容易区分。因此，为了将模块和js代码相分离，我们可以采用.vue文件.

image.png

2.抽取过程

① 创建.vue文件

image.png

<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文件之前安装和配置。

image.png

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的使用版本。

image.png