<style>
.reveal section img {
margin: none;
background: none;
border: none;
box-shadow: none;
}
</style>
# KS F2E LDS Vue2
## 從安裝到實作計數器

---

# 開始之前
- [Node.js](https://nodejs.org/en/)
- node 4 以上(建議安裝 v6.10.3)
- npm 3
- IDE
- [VS Code](https://code.visualstudio.com/)
- [sublime Text](https://www.sublimetext.com/)
- command line 下敲一些指令

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

---

## 安裝 Vue2
[vue-cli](https://github.com/vuejs/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 會直接在畫面上更新，改變你剛剛改好的程式碼。

---

#### 比較圖：

| 套件 | 功能 | 畫面更新 | 資料重新 load |
|:---|:---|:---|:---|
| live-reload | 幫你按 F5 | 是 | 資料須重新 key |
| 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](https://cn.vuejs.org/)
- [實作小範例入門 Vue & Vuex 2.0 系列](http://ithelp.ithome.com.tw/users/20103326/ironman/1114)
- [vue & vuex 02 - 使用 Vue-cli 安裝 vue 和 webpack 環境與相關套件](http://ithelp.ithome.com.tw/articles/10184919)