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',
// 編譯的檔案路徑
output: {
//`dist`資料夾
path: './dist',
// 檔案 `build.js` 即 dist/build.js
filename: 'build.js'
},
module: {
// 一些特定的編譯規則
loaders: [
{
// 讓webpack去驗證檔案是否是.js結尾將其轉換
test: /\.js$/,
// 通過babel轉換
loader: 'babel',
// 不用轉換的node_modules資料夾
exclude: /node_modules/
}
]
}
}
建立一個檔案.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-31
Webpack不懂得如何去處理.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
檔案。