Vue.js結合webpack開發時，webpack環境的搭建
當然，開始前先確保已成功安裝node.js和npm（網上都有相應教程這裡不做過多說明）。
1.建立專案基本檔案結構
建立一個專案叫做MyApp在一個空白資料夾中。它將會作為整個專案的根目錄。
cmd命令進入到MyApp資料夾。
$ cd MyApp/建立一個沒有任何依賴關係的package.json。
{
"name": "myapp",
"version": "0.0.1",
"description": "My app",
"dependencies": { },
"devDependencies": { },
"author": "You"
}建立一個index.html在該檔案。這是真正顯示在伺服器的html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Example</title>
</head>
<body>
<h3>{{ message }}</h3>
<script src="dist/build.js"></script>
</body>
</html>注意下面的兩點：
·
dist/build.js 現在並不存在
· {{message}}的資料會被vue檔案所填入
建立一個src資料夾和加上檔案src/main.js:
import Vue from 'vue'
new Vue({
el: 'body',
data: {
message: "Hello Vue"
}
})到目前為止我們完成了一個關於vuejs的大體架構。
2.基本webpack構建
建立一個webpack.config.js
module.exports = {
// 這是一個主檔案包括其他模組
entry: './src/main.js',
// 編譯的檔案路徑 建立一個檔案.babelrc。Babel是一個工具，你可以轉換ES6到現在的Javascript。Vue需要配置es2015和stage-0：
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}在命令列中安裝webpack：
$ npm install -g webpack安裝本地庫（作為dev dependencies），需要在package.json中新增devDependecies的部分。
"devDependencies": {
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.2",
"babel-preset-es2015": "^6.1.2",
"babel-preset-stage-0": "^6.1.2",
"babel-runtime": "^5.8.0",
"webpack": "^1.12.2"
}在儲存後，執行：
$ npm install然後，將vuejs庫安裝到你的dependencies中。
$ npm install --save vue現在你可以建立一個app用WebPack，執行
$ webpack你可以看到輸出檔案：
Hash: 6568e32467dc12c8aeeb
Version: webpack 1.12.9
Time: 743ms
Asset Size Chunks Chunk Names
build.js 246 kB 0 [emitted] main
+ 3 hidden modules你開啟index.html。如果你在瀏覽器上看到Hello Vue，那就做的非常好。恭喜，你基本完成基本的Vue專案。
3.vue-loader和.vue檔案
現在我們要去做vuejs最奇妙的部分，通過.vue檔案構建元件。
儲存你的index.html如這樣。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Example</title>
</head>
<body>
<App></App> //在dom中引入元件
<script src="dist/build.js"></script>
</body>
</html>注意如今，用一個viewmodel替換根節點，用一個叫app的元件嫁接在<app></app>。
把你的main.js的程式碼改成:
import Vue from 'vue'
import App from './app.vue'
new Vue({
el: 'body',
components: { App }
})現在，注意我通過app.vue取一個元件叫App，並且將模板鑲嵌在body元素中。
我們會建立一個檔案src/app.vue，並加上這些程式碼:
<template>
<div class="message">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello from vue-loader!'
}
}
}
</script>
<style>
.message {
color: blue;
}
</style>在這個檔案中，我們設定了style，定義了指令碼的一些功能和定義了HTML的模板。如果你想知道它是怎麼執行的，參考vue文件。
重新執行一下webpack，我們看到變化。
Hash: c71cc00f645706203ac4
Version: webpack 1.12.9
Time: 749ms
Asset Size Chunks Chunk Names
build.js 246 kB 0 [emitted] main
[3] ./src/app.vue 0 bytes [built] [failed]
+ 3 hidden modules
ERROR in ./src/app.vue
Module parse failed: /home/anirudh/work/misc/vue-scaffold/example/src/app.vue Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <template>
| <div class="message">{{ msg }}</div>
| </template>
@ ./src/main.js 7:11-31Webpack不懂得如何去處理.vue的新語法。去修改你的webpack配置檔案。
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
publicPath: 'dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue'
}
]
},
vue: {
loaders: {
js: 'babel'
}
}
}現在你可以加上一些庫到你的package.json在devDependencies:
"css-loader": "^0.23.0",
"style-loader": "^0.13.0",
"vue-loader": "^7.3.0",
"vue-html-loader": "^1.0.0"執行npm install獲取新的庫，然後，執行webpack。
Hash: 740a1d3c85161f03a0cf
Version: webpack 1.12.9
Time: 1355ms
Asset Size Chunks Chunk Names
build.js 258 kB 0 [emitted] main
+ 11 hidden modules當你開啟瀏覽器，你可以看到標題”Hello from vue-loader”藍色字。這就意味著你的樣式和JS都編譯成功。
4.熱模組替代/熱更新
熱模組替代或熱更新是當今最熱門新的技術。它讓你儲存 JavaScript檔案，就把對應的元件實時更新。
原來的表現如下：
· 寫一個App
· 在瀏覽器載入，並試用它
· App進入一個狀態被Vue所渲染在螢幕
這時，你想要一個快速修改或修復一個bug。你需要重新載入頁面，操作所有的步驟到那個指定狀態。
熱更新讓整個步驟變得簡單：
開啟一個App，操作到指定狀態
· 修改原始碼並儲存
· Webpack識別到程式碼變化，它重新編譯被更改的指定模組
· Webpack利用類似websockets的技術上傳程式碼和更改線上瀏覽器的效果
· Vue檢測新的資料模型和熱補丁, 和重新渲染app並儲存著完整的狀態
第一步我們需要用WebPack的dev server。 首先，修改你的devDependencies在package.json。
"vue-hot-reload-api": "^1.2.0",執行一下程式碼
$ npm install$ npm install -g webpack-dev-server$ webpack-dev-server --inline --hot當你用webpack-dev-server，你會看到一個很大的輸出：
http://localhost:8080/
webpack result is served from /dist/
content is served from /home/anirudh/work/misc/vue-scaffold/example
Hash: ef5ed1df9062de968cb6
Version: webpack 1.12.9
Time: 1773ms
Asset Size Chunks Chunk Names
build.js 511 kB 0 [emitted] main
chunk {0} build.js (main) 465 kB [rendered]
[0] multi main 52 bytes {0} [built]
[2] (webpack)-dev-server/client?http://localhost:8080 2.48 kB {0} [built]
[3] (webpack)/~/url/url.js 22.3 kB {0} [built]
[... omitted for brevity ...]
[85] ./~/vue-html-loader!./~/vue-loader/lib/selector.js?type=template&index=0!./src/app.vue 58 bytes {0} [built]
[86] ./~/vue-hot-reload-api/index.js 5.62 kB {0} [built]
webpack: bundle is now VALID.當你開啟瀏覽器輸入http://localhost:8080之後，你能看到一樣的結果。但是不能真正的展示出Vue的熱模組替換的牛逼之處。
接下來，你改你的src/app.vue:
<template>
<div class="message">Value is: {{ count }}</div>
<a href="#" @click.prevent="increment">Increment</a>
</template>
<script>
export default {
data () {
return {
count: 0
}
},
methods: {
increment () {
this.count ++;
}
}
}
</script>
<style></style>重新整理http://localhost:8080，你可以看到一個計數器和增加按鈕。 你點選計數器就會增加。
現在你更新程式碼，改樣式，改按鈕名字或按鈕的功能。你儲存，元件就更新但是計數器的值還保持不變。
接下來
這並不是你專案需要的所有，但是它是你需要構建Vue的全部。但是在你要開始寫App前，你還要花時間去Google和建立：
分開開發和產品的構建方式
注意，移動你的webpack.config至一個特定資料夾需要你在命令列特別宣告。
測試
圖片，靜態檔案，CSS
你需要自定義CSS和圖片檔案，webpack可以通過loader像file-loader，url-loader來優化開發流程。
檢查錯誤
你可以用eslint-loader配置eslint直接執行Webpack。vue-loader-example 設定好.eslintrc檔案。