開始之前

• Node.js
  • node 4 以上(建議安裝 v6.10.3)
  • npm 3
• IDE
  • VS Code
  • sublime Text
• command line 下敲一些指令

測試 node.js 當前環境 node -v 或 npm -v 檢查

安裝 Vue2

vue-cli

簡單說就是作者開發的 vue 懶人開發包，快速建立好開發環境，

install vue-cli

npm install -g vue-cli

• npm(內建) 是 node.js 安裝套件的管理工具之一
  • 其他還有 facebook 的 YARN
• -g 是 npm 安裝語法將套件安裝在全域環境的意思。

build webpack vue2

vue init webpack YOUR-PROJECT-NAME

YOUR-PROJECT-NAME -> 只需命名你喜歡的 project 名稱，cli 將會幫你產生此資料夾，並安裝你選定的結構。

為什麼選用 webpack ?

主要想使用 Hot-loader 功能體驗快速反應的開發系統，與最新的自動化建構工具。

什麼是 Hot-loader ?

你可以想像成 live-reload 的進階版本，Hot-loader 會直接在畫面上更新，改變你剛剛改好的程式碼。

比較圖：

build vue webpack template option

? Project name vue
? Project description A Vue.js project
? Author 
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

安裝好了，啟動！

// 1.移動到開發包中：
cd your-project-name
 
// 2. 透過 npm 安裝相依套件
npm install
 
// 3. 執行開發版
npm run dev

Reference

• vue.js
• 實作小範例入門 Vue & Vuex 2.0 系列
• vue & vuex 02 - 使用 Vue-cli 安裝 vue 和 webpack 環境與相關套件