如何經過 Vue-Cli3 - Vuex 完成一個 TodoList

昨天大概粗糙的瞭解了一下Vue的概況以後，並無從框架、語法的細節來進一步學習。那今天經過一個簡單的實例來繼續完善一下Vue這方面的空白，用一些看得見的效果摸的着的代碼在不斷完成小目標的過程當中慢慢消化一下相關的知識點。固然用一個簡單的實例來徹底掌握Vue也不太現實，只是經過這樣一個例子來樹立學習的信心，瞭解Vue基礎知識點。

Vue-cli-todolist，是一個用vue-cli3工具初始化項目，而後在此基礎上完成todolist的案例，相關的技術棧：Vue-cli3， Vue，VueRouter，Vuex。Element-ui，IView, Vux等UI組件爲輔助。

先看一下咱們完成的效果：

• vue-cli-todolist
• 參考自：全部前端技術實現的todomvc.com
• 尤大vue-totolist

1. 安裝Vue-cli

分享前的約定: 如下大部分命令步驟基於Mac系統，Windows系統差別點也會提到。

1.1 先在Github創建倉庫

爲了保持代碼可以長期有效，也方便麪試時展現，建議將代碼以Git的方式存放，好比：http://github.com，http://gitee.com,https://bitbucket.org/等等。選擇任意一款新建倉庫：vue-cli-todolist，git clone倉庫到本地(Windows系統建議非桌面的盤符路徑存儲，好比D:/vue-todolist)，而後cd ..，在iTerm新建一個 tab 準備進行安裝Vue-cli，留存當前的tab等安裝完成以後運行npm run serve。

1.2 Vue-cli的做用

• 本地生成文件和配置，減小繁瑣的配置，以最短的時間最小的文件結構讓項目先跑起來，讓更多的精力關注開發自己。vue-cli3中vue.config.js不是必須，新建以後自動覆蓋默認設置。
• 那若是不使用vue-cli那怎麼辦？就是手動在本地創始化package.json，而後其它相應文件手動建立手寫配置，效率低，出錯可能大。

1.3 Vue-cli的全局安裝

若是有舊版vuecli先得卸載，而後才能安裝新版。

npm uninstall -g vue-cli
vue -V

輸出：vue不是內外部命令時說明卸載成功，一樣，新版安裝成功經過這個命令來驗證。

1. 安裝前提必須安裝nodejs，安裝完以後經過node -v來肯定是否安裝成功，若是輸出相似v10.15.3字樣表示安裝成功。//同時也安裝了npm，輸入如下命令來確認npm -v，若是輸入6.4.1字樣表示安裝成功。 call:node
2. 經過npm install -g @vue/cli命令安裝最新版，其中-g的意思是安裝到全局，就像一個全局變量同樣，之後在任何一個目錄均可以運行建立命令vue create。
   PS: 若是是使用Mac的同窗此處可能須要增長sudo，完整的命令就是這樣：sudo npm install --global vue-cli，不然會報這樣的錯誤Error: EACCES: permission denied, access '/usr/local/lib/node_modules'，若是是Windows同窗注意在右鍵用管理員方式打開cmd。
3. vue create vue-cli-todolist 經過此命令在原來git clone項目的Tab中來建立一個項目。
   這時會有三個選項選擇，

• Overwrite
• Merge
• Cancel

建議選擇Merge，若是是Overwrite會刪除.git隱藏文件，致使不能進行git commit，安裝完成後經過vue -V來驗證是否安裝成功，若是輸出3.7.0這樣的字樣，就說明安裝成功了。

$ cd vue-test
 $ npm run serve

根據命令行中提示的端口號，就能夠預覽到一個基礎的項目頁面。

1. 而後刪除根目錄下.gitignore文件中的dist目錄，說明之後dist目錄也須要提交上傳，git提交代碼，推送到遠程，在github倉庫刷新頁面看到代碼結構，說明代碼遠程推送成功。

2. npm i vue-router -S經過此命令來安裝路由組件，不少朋友剛開始不太會區分-S，-D的區別，這個-S表示上線依賴，是--save縮寫，表示上線以後還須要存在的代碼塊，好比Vue.js，對應package.json中的dependencies: {}，-D表示開發依賴，是--save-dev縮寫，表示只是在開發階段使用，上線以後只使用他的結果文件就能夠了，好比sass-loader, babel，對應package.json中的devDependencies: {}。

3. npm i sass-loader -D經過此命令來安裝咱們後面用到的scss，也能夠經過一個命令用空格分隔安裝多個組件，好比：npm i sass-loader vue-loader -D。
   ps: call:npm

2. 路由的配置

增長路由的目的仍是爲了讓咱們更方便的進行編程，好比：有些頁面須要用戶登陸以後才能訪問？好比有些頁面進入以後後退就不讓他進入這個頁面？等等這樣的場景均可以經過路由來實現。

• 在src目錄下新建router.js，引入相關的對象，而後use，最後export。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/views/home'),
    }
  ],
})

• 這樣router路由咱們就建好了，可是他尚未被使用，因此還須要在main.js中引入以後被使用，這樣配置的路由纔會起做用，根據路由訪問時纔會跳轉到指望的畫面。

import router from './router'
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

• 而後刷新頁面，多了一個/#/，最後顯示爲http://localhost:8080/#/，且顯示畫面沒有報錯，說明咱們的路由配置文件添加成功。

3. Sass-loader

加入scss的目的是讓咱們更快更方便的方式編寫css，瞭解一下。

須要在項目中使用scss，只須要在.vue組件中的style中添加lang="scss"，就可使用了：

<style lang="scss">
</style>

//node-sass包比較難安裝，須要屢次從新安裝。

• 可是添加以後命令工具報錯Can't resolve 'sass-loader'，這時候就須要咱們經過命令npm i sass-loader -D來安裝依賴。他主要的功能就是負責把scss編譯爲css。

• 安裝完成以後，仍是會報Cannot find module 'node-sass'，咱們繼續npm i node-sass -D安裝依賴。
  安裝完成以後刷新頁面仍是報錯，這時候須要從新啓動服務了。具體步驟爲先：ctrl+c中止服務，而後輸入命令npm run serve啓動，再刷新頁面，畫面重現。

• 由於此次的重點是Vue-cli，因此相關Html, CSS直接複用，恰好todo相關css已經有npm包，咱們直接安裝相關css模塊， npm i todomvc-common todomvc-app-css -S，而後在main.js中引入：

import 'todomvc-common/base.css'
import 'todomvc-app-css/index.css'

那到這一步咱們前期的準備工做已經完成了，下面就是根據頁面特色進行組件的拆分了。

4. 組件

拆分組件的難點在於，組織結構上趨於分散，但數據處理上趨於集中，集中的數據便於管理或驅動頁面視圖。
組件是Vue開發當中最小的組成單元，以.vue擴展名結尾，他包括：Html結構, JS, CSS，數據流，監聽處理子組件觸發事件，引用子組件(ref)。
如何拆分是一個開發習慣，並無一個準確的原則，細拆能夠拆分一個按鈕爲一個組件單元，但拆的越細壞處是會形成頁面維護的困難，好處是頁面組件的複用性更好。若是拆的少，組件結構關係比較簡單，可是頁面組件複用性不高，最終要達到指望效果仍是要平衡和取捨。
根據當前頁面的特色，大致拆分爲如下四個部分，分別爲：Header, List, Footer, Copyright，新建對應的*.vue文件而且放置在vue-cli-todolist/src/components目錄下，而後相應的組件在vue-cli-todolist/src/views/home.vue中引入，而後在增長：

components:{ Header, List, Footer }

須要注意的是Copyright在整個操做容器外部，因此放在App.vue中。

4.1 home.vue

因爲Vue單數據流的限制規則，此組件頁面是操做整個Todolist數據源的總頁面，全部對數據的操做方法都彙總在此組件來實現，包括子組件對數據源的操做。父級 prop 值的更新會向下傳遞，但不能反向傳遞，也不能在子組件直接修改 prop。這樣作的目的是爲了防止從子組件意外改變父級組件的狀態，從而致使數據流向難以理解。其實對Todolist的操做，就是常說的是增刪改查，只是少了一個查找而已，頁面上的常規操做就是對Todolist數據源對象的的增長刪除修改，那對應的代碼其實就是數據的push, splice, forEach等方法。須要注意的是這些操做數據的結果都是基於瀏覽器的，刷新以後並不存在，解決辦法後端接口存儲和本地存儲，本案例中經過localStorage存儲在本地。

而後咱們找一行有特徵引入組件的方式來分析一下，好比：

<main-view :todos="filteredTodos" @del-todo="delTodo" @all-done="allDone"></main-view>

• main-view表示組件名稱，若是是全局組件那名稱是惟一的。
• :todos="filteredTodos"，冒號表示變量是動態的，若是不是冒號默認是String，todos表示子組件接受數據的變量名稱，filteredTodos表示當前頁面的變量名稱。子組件中經過props屬性來接受父組件傳來的數據，經過$emit的方法觸發事件而後在父組件修改數據，整個的數據即能靈活的傳下去，也能有效的迴轉回來。
• @del-todo="delTodo"，@表示事件處理，del-todo爲子組件$emit方法名，delTodo爲當前組件事件處理方法名。組件數據經過:todos="filteredTodos"傳下去，而後經過@del-todo="delTodo" @all-done="allDone"進行捕獲處理。

4.2 Header.vue

• home.vue中輸入<header>....</header>，刷新頁面以後發現並無達到指望的效果，只有<header>....</header>的代碼片斷。這時候就發現組件名稱不能與HTML的原有標籤名稱重複，不然當普通的html標籤解析。修改Header.vue爲HeaderView.vue以後刷新頁面，獲得指望結果頁面。另外的一個辦法就是大寫，好比：<Header>....</Header>。

4.3 Main.vue

此頁面雖然Html元素很少，但須要處理的東西仍是挺多，包括點擊進行中處理，雙擊進入編輯狀態，.enter.blur事件退出編輯狀態，基本每一個Html元素上都須要js代碼的處理，這裏邊大概有這幾點分享：

4.3.1 template

• v-model
  擴展爲：

<input v-model="field" />
<input :value="field" @input="field = $event.target.value" />

每當輸入框內容發生變化時，就會觸發 oninput ，把最新的value傳遞給 field。

• :class

  • 對象語法 { active: isActive, 'text-danger': hasError }，經過Boolean值控制是否有值
  • 數組語法 [activeClass, errorClass]，經過變量合併顯示
    文檔：https://cn.vuejs.org/v2/guide/class-and-style.html
• @dblclick，@click
  綁定事件的縮寫形式，完整的爲：v-on:click="handle"
  文檔：https://cn.vuejs.org/v2/guide/events.html
• {{ item.title }}
  基礎變量顯示，原始html須要v-html="rawHtml"指令。
  https://cn.vuejs.org/v2/guide/syntax.html
• @keyup.enter.prevent
  經過事件修飾符連寫，達處處理冒泡，阻止自定義事件等等的目的
  https://cn.vuejs.org/v2/guide/events.html

• computed -> set || get
  通常計算屬性默認都是getter，全選的處理須要主動的修改數據源。
  https://cn.vuejs.org/v2/guide/computed.html

4.3.2 script

• props接受數據，data初始化變量
• computed中allDone經過進行中的數量是否爲零來有效的在初始化時獲得全選的狀態。
• util方法就是對跨組件代碼塊複用的封裝export而後import以後使用。

4.3.3 style

• vh
  css3新單位，相對於視口的高度的百分比，視口被均分爲100單位的vh，1vh = 視口高度的1%。

h1 {
    font-size: 8vh;
}

若是視口的高度是200px，那麼上述代碼中h1元素的字號將爲16px，即(8x200)/100=16

4.4 Footer.vue

點擊狀態每次切換須要切換畫面，畫面的變化依賴於路由，因此須要記錄路由名稱 this.current，在home.vue中經過watch來實現：

'$route' (to) {
  this.current = to.name
},

4.5 Copyright.vue

版權頁面佈局採用Flex形式佈局。擴展認識：Flex垂直水平居中對齊

5. main.js

若是說App.vue是項目的組件入口文件的話那麼main.js就是項目的代碼入口，全部相關js的初始化以及npm包的引用都在此文件處理。ES6規定，import必須放在首行，有的組件須要Vue.use，有的則不須要。
Vue全家桶相關的Router, Vuex都須要在此文件綁定。

6. package.json

• dependencies 上線依賴，npm i -S moduleName
• devDependencies 開發依賴 npm i -D moduleName

同時習慣於vue-cli2 npm run dev方式的同窗，也能夠在package.json中增長：

"scripts": {
  "dev": "npm run serve",
  "serve": "vue-cli-service serve"
}

能夠用npm run dev繼續運行當前項目。

7. package-lock.json

記錄當前狀態下實際安裝的各個npm package的具體來源和版本號，package.json文件只能鎖定大版本，也就是版本號的第一位，並不能鎖定後面的小版本你每次npm install都是拉取的該大版本下的最新的版本，爲了穩定性考慮幾乎是不敢隨意升級依賴包的，這將致使多出來不少工做量，因此package-lock.json安裝一個依賴的時候就鎖定在你安裝的這個版本。

8. npm run build

在根目錄增長vue.config.js，css,js默認訪問根目錄，而咱們發佈以後的目錄是http://www.host.com/dist/，多了一層dist，因此須要配置publicPath，不然控制檯報找不到資源的錯誤：

module.exports = {
  publicPath: './',
  productionSourceMap: false
}

至此爲止，今天階段性的學習就到此告一段落了。學習到此處有疑問的同窗，加QQ羣：364912432，Vue交流微信羣須要加入QQ羣以後邀請。
源碼在這，vue-cli-todolist
若是還想進一步學習，那能夠看咱們這些分支：

帶m的移動端，由此能夠發現，這個項目不可是能夠學習入手的項目，也是能夠作爲相關其它UI組件Demo場地，再加個路由就能夠自由的玩耍了：

• dev-base: 是基礎版，沒有Vuex的版本
• dev-vuex: 是Vuex版本
• dev-element-ui: 是element-ui版本
• dev-m-vux: 是移動端vux版本，帶m的移動端
• dev-base: 是基礎版
• gh-paes: 在線預覽頁面分支