??為了緩解大家的審美疲勞，小編今天換了一個主角--Vue。今天的Vue和往常不一樣，它可是抽取代碼的葵花寶典。
【今天主要講講在項目中，如何對有關Vue的代碼進行抽離】
一、基本抽?。?el 和template
1.el 和template 抽取代碼的原因
這個故事恐怕要追溯到很久很久以前，我們先來看看Vue最原始的面貌。
某天，index依舊跟往常一樣，搬運著掰著手指頭都數(shù)不過來的代碼。
index:好累，我只是個手無縛雞之力的弱女子，卻承受了這個年紀不該承受的重量，生活不僅僅有詩和遠方，還有數(shù)不勝數(shù)的代碼...
template：哎呀呀，你怎么搬這么多的東西，快快停下來。這些重活粗活是我們干的，怎呢勞煩您動手呢。
【最最原始使用Vue的方法就是通過Vue實例中的el屬性和.html頁面綁定在一起，然后將要展示的東西通過{}引入到index界面中。但是用Vue開發(fā)的項目中，一般只有一個index.html頁面，并且頁面的內(nèi)容很簡單，后期也不需要、多次修改，可謂一言定終身啊】
2.抽取的方式
??其實很簡單，index只保留和el綁定的標簽，而所有的數(shù)據(jù)顯示都放在template中。效果圖如下所示：
??在這里，index只需要負責美麗，而template只需要負責搬運。原理是這樣的：當el和template共存時，el綁定的模塊就會被template替換掉。
??就像本案例中，<div class="warp"></div>會被<div><h1>你今天學習了嗎？</h1><button>學了</button><button>學了</button></div> 這些內(nèi)容替代。
二、進階抽?。航M件抽取
1.組件抽取的原因
??當我們把內(nèi)容的顯示都抽取到Vue實例中的template時，就會產(chǎn)生一個問題：如果顯示的內(nèi)容很多很多，Vue實例中的代碼量就會很多很多，不利于維護，所以我們最好將template的內(nèi)容抽取到一個組件中去
2.組件抽取的方式
??將Vue實例中的template內(nèi)容放到另外一個組件，最后在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
}
})
??在入口函數(shù)main.js中，聲明了一個叫app的子組件，將父組件要顯示的html元素和數(shù)據(jù)都放到了子組件中，然后在父組件的模塊使用子組件。
這里一定要注意的是，版本問題?。“姹締栴}??！版本問題！！重要的事情說三遍！如果你的webpack是3.0版本的，babel-loader，babel-core，babel-preset可以參考小編的版本：
通過 npm install babel-loader@7 babel-core babel-preset-es2015 安裝，安裝成功的結(jié)果如下：
當然也可以通過當前目錄的package-json查看相應的版本信息
三、模塊化抽取
1.模塊化抽取的思想
??通過上面組件的抽取，我們可以看出組件app是一個對象。模塊化抽取的思想就是將app的內(nèi)容單獨抽取到另外一個.js文件中，經(jīng)過export導出之后再由import導入到入口函數(shù)中。
2.具體步驟：
① 創(chuàng)建.js文件
該文件主要存放app組件內(nèi)部的所有內(nèi)容，比如：
創(chuàng)建了名字為app的js文件，然后通過export導出。
② 導入js文件
??在入口函數(shù)main.js中通過import導入app.js文件。以后想要修改app的內(nèi)容時，只需要到app.js文件修改即可。要記得注意路徑問題。
四、Vue文件抽取
1.抽取的原因
??經(jīng)過上面的模塊化抽取之后，仍舊有不足，就是模板和js代碼時寫在一塊的，不容易區(qū)分。因此，為了將模塊和js代碼相分離，我們可以采用.vue文件.
2.抽取過程
① 創(chuàng)建.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中。如此一來就實現(xiàn)了各個功能代碼的分離。
③ 運行 .vue文件
??Vue文件是不能直接在瀏覽器中被識別的，也需要借助loader，因此在運行.vue文件之前安裝和配置。
3.1 安裝 vue-loader
??在終端中輸入命令：npm install --save-dev vue-loader vue-template-compiler
vue-loader 只是負責加載.vue文件，而真正實現(xiàn)編譯的是vue-template-compiler
3.2 配置 vue-loader
在webpack.config.js文件中配置下面的代碼：
{
test:/\.vue$/,
use:['vue-loader']
}
但現(xiàn)實總是殘酷的。如果你的vue-loader 版本大于14 ，就需要安裝插件才可以運行vue文件，如果不想安裝插件，可以降低vue-loader的使用版本。
