最詳細的Vue Hello World應用開發步驟
很多Vue的初學者想嘗試這個框架時，都被webpack過於複雜的配置所嚇倒，導致最後無法跑出一個期望的hello word效果。今天我就把我第一次使用webpack打包一個Vue Hello World應用的所有步驟詳細記錄下來，供Vue的初學者參考。
安裝nodejs和npm，這兩個就不用說了，網上很多教程。
本地隨便新建一個資料夾，進入後執行命令npm init, 一路next下去，自動生成package.json。
執行命令npm install –save-dev webpack-dev-server，安裝一個輕量級的伺服器，該伺服器用於vue應用開發完畢後的本地測試。
重複執行命令npm install –save-dev
npm install –save-dev css-loader
npm install –save-dev vue-template-compiler
npm install –save-dev webpack
npm install –save-dev vue-loader
npm install –save-devvue-router引數-save-dev的效果是讓這些安裝的module出現在package.json的devDependencies區域內，如下圖紅色區域所示：
這些都是開發時依賴。我們再用下列命令安裝執行時依賴：
npm install –save vue vuex然後再在package.json裡手動加入如下這一段內容：
目的是開發完畢後，使用命令npm run dev可以啟動webpack-dev-server，執行我們的vue應用，並帶上引數--inline --hot。
- 在專案資料夾根目錄下建立一個名為src的資料夾，資料夾裡新建一個檔案index.vue，把如下內容拷貝進去：
<style> h2{ color: red; } </style> <template> <h2>Jerry: Hello, World!</h2> </template> <script> module.exports = { data: function(){ return {}; } } </script>
再回到根目錄下，新建一個檔案main.js:
import Vue from 'vue';
import AppJerry from './src/index.vue'
new Vue({
el: "#demo",
components: {
app: AppJerry
}
});這段程式碼首先將我們在src資料夾的index.vue裡實現的應用匯出，儲存到變數AppJerry裡，再將這個應用安裝到html頁面id為demo的div標籤裡。安裝是通過建立Vue例項並將div元素的id傳入建構函式裡進行的。當然，我們還沒建立html檔案，所以馬上建立一個名為index.html的檔案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<div id="demo">
<app></app>
</div>
<script src="dist/build.js"></script>
</body>
</html>我們注意到這個index.html裡引用了一個dist/build.js的檔案，這個檔案用來幹嘛的？
這裡就不得不提webpack在現代前端開發技術中起的重要作用了。WebPack可以看做是模組打包機：它做的事情是，分析我們的前端專案結構，找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言，比如Scss，TypeScript等，並將其打包為合適的格式以供瀏覽器使用。具體到我們這個例子，就是說webpack把我們src資料夾下的index.vue打包轉換成瀏覽器能識別的js檔案，webpack的輸出就是dist資料夾下的build.js檔案。
為了讓webpack清楚地知道它要完成什麼樣的任務，我們通過建立一個配置檔案webpack.config.js來完成webpack任務指定。
這個配置檔案的內容：
var path = require('path');
module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(png|jpg|eot|svg|ttf|woff)/,
loader: 'url?limit=40000'
}
]
}
}裡面定義了webpack執行任務的入口是main.js檔案，任務輸出的資料夾是專案資料夾裡的dist目錄，輸出檔案是build.js, webpack掃描的檔案通過vue-loader指定，特徵是以.vue結尾的檔案。
到目前為止，這個基於Vue的hello world應用的開發和配置都結束了，是不是很簡單？
我們可以來測試了。
- 直接在命令列裡敲webpack命令，就會自動執行打包操作，並在控制檯上看到build.js檔案成功生成的訊息：
這個打包後的檔案尺寸很大，有323KB，包含了vue.js本身的內容和我們index.vue裡的轉換後的內容。下圖高亮區域就是我們index.vue裡的實現被webpack處理後生成對應的JavaScript程式碼。
使用npm run dev啟動webpack-dev-server，看到提示說在localhost:8080上可以訪問我們的應用了。
瀏覽器裡訪問，看到Hello World的輸出，說明我們成功地走完了一個基於webpack的Vue應用開發流程。
要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":
uto-orient/strip%7CimageView2/2/w/1240)