<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
```bash=
npm install -g vue-cli
```
- `npm`(內建) 是 `node.js` 安裝套件的管理工具之一
- 其他還有 facebook 的 `YARN`
- `-g` 是 `npm` 安裝語法將套件安裝在`全域環境`的意思。
---
## build webpack vue2
```bash=
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
```
---
## 安裝好了，啟動！
*****
```bash=
// 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)
{"metaMigratedAt":"2023-06-14T12:56:24.824Z","metaMigratedFrom":"Content","title":"KS F2E LDS Vue2","breaks":true,"contributors":"[]"}