序言
上次我們說(shuō)了webpack的搭建剥啤，其實(shí)就是為了我們開發(fā)各種框架和使用各種語(yǔ)言做的一個(gè)準(zhǔn)備锦溪，所以這次我就記一下webpack配合vue的開發(fā)不脯。
一、先來(lái)看下搭建大型網(wǎng)站的配置步驟刻诊，vue官網(wǎng)上有詳細(xì)說(shuō)明防楷，這邊把它簡(jiǎn)化下來(lái)
1、安裝vue
npm install vue --save-dev
2坏逢、全局安裝vue-cli
npm install --global vue-cli
3域帐、初始化項(xiàng)目
vue init webpack my-project
4、進(jìn)入my-project文件并安裝依賴
cd ./my-project
在安裝之前我們需要把phantomjs獨(dú)立先安裝是整，不然就會(huì)各種報(bào)錯(cuò)
npm install phantomjs --phantomjs_cdnurl=http://cnpmjs.org/downloads
npm install
需要說(shuō)明的是如果構(gòu)建小型的應(yīng)用并不推薦用cli肖揣，個(gè)人覺得它的目錄結(jié)構(gòu)太復(fù)雜，并不利于小型應(yīng)用開發(fā)浮入。
二龙优、接下來(lái)，我們?cè)谧约簞?chuàng)建的好的webpack文件里進(jìn)行配置
先安裝vue
npm install vue--save-dev
接著安裝vue-loader和vue-template-compiler(用于解析.vue文件的模板)
npm install vue-loader --save-dev
npm install vue-template-compiler --save-dev
接下來(lái)需要在loader里添加vue后綴文件的處理器
{
test: /\.vue$/,
use:[
{loader: "vue-loader"}
]
}
XXX.vue：一般模塊化開發(fā)用于存放模塊事秀。
然后我們就可以愉快的在index.js中引進(jìn)vue來(lái)使用了
import * as Vue from 'vue';
或者 var Vue = require('vue');
