vue實現週報填寫小系統（上）

豆豆大魔王發表於2017-12-14

前陣子部門分享提到了vue框架，正好自己最近也在看，稍微瞭解了一些基礎知識，趁此機會做個學習總結，順便參照部門的週報填寫系統做個簡單的小專案練練手。（前置知識需要去官網看下入門文件，node、npm的簡單操作）

why VUE?

先看下一個最最傳統的頁面開發，在寫一個展示性頁面時，在寫好html個css完成佈局後，下一步就是從後臺獲取資料，將資料渲染到頁面中。假如我們要在id為ul1的容器中渲染一些新聞，首先我們需要用js去獲取需要增加內容的容器，即ul1，然後再將獲取的後臺資料通過迴圈分別放到我們用js建立的li元素中，再將這些li元素依次放到dom中。至此，我們會發現，一個簡單的列表渲染工作，竟然充斥著大量的dom操作（獲取dom，建立dom，插入dom），從開發一個網頁的工程師的角度來看，我們更想關注的是頁面效果以及資料，但上述的操作又不得不讓我們花費大量的時間去做一些dom操作。那麼有什麼辦法能夠讓我們更加專注於資料，而不用花費太多精力在dom操作上呢？

到這裡，我們引入vue的第一個特性--資料驅動

vue可以算是一個MVVM框架，簡單來說，可以用下圖來解釋

可以看出，View和ViewModel，ViewModel和Model之間的通訊都是雙向的，而View和Model不發生聯絡，他們之間通過ViewModel來通訊，他們的變動也會通過ViewModel來影響到對方，這樣就把資料和DOM分離開來，避免了使用者對DOM的直接操作與。而vue就充當了中間的VewModel這個角色，它將我們從繁重的dom操作中解放出來，更加關注資料。

vue的第二個特性--元件化

這邊為了文章結構，先丟擲vue的第二個特性，那麼什麼是元件化呢？先來看看一個常規頁面

如果有一個這樣的頁面給我們讓我們進行重構，相信大部分前端工程師腦子顯示對頁面進行了一個簡單的結構劃分，比如這個魔獸官網，我們可以將其分為幾個部分來進行重構，如圖

我將其分為頭部，廣告內容，底部三個部分，如果點開某個二級頁面，可能這個二級頁面的頭部和首頁的頭部是一樣的，那麼這個頭部就可以考慮將其提取成一個單獨的元件以便複用。其實vue的元件化特點也是這個意思，在vue中，可以將所有的dom片段看成元件，實際元件劃分還是要看應用場景，畢竟沒有最好的解決方案，只有最合適的。

關於vue的特性就簡單介紹到這裡，俗話說，學習一個框架，最好的方法就是不要慫，直接就是幹！話不多說，直接開始。這裡我使用vue官方提供的一個腳手架工具 vue-cli，這個工具就是可以讓我們直接去寫頁面而不用配一些煩人的配置，具體介紹請移步官網

接下來就開始我們的程式碼編寫（你需要知道npm和node的簡單命令和使用，還有git的簡單使用，如果你不知道這些，那你要抓緊去學了！）

vue-cli腳手架搭建

怎麼搭建呢？當然是去官網看demo啊！第一步，開啟你的命令列工具，windows建議使用git bash，因為自帶的命令列就是shit，mac可以直接用終端，確保你的電腦裝好了node!輸入如下命令全域性安裝vue-cli，網路不好的請選擇cnpm安裝

npm install -g vue-cli
複製程式碼

安裝完腳手架工具後，進入想要生成專案的目錄下，輸入如下命令搭建一個vue腳手架，這裡選擇webpakc模板，webpack不是這個文章的主角，你只需要知道，webpack賊6！

vue init webpack weekly-report-demo
複製程式碼

這邊我把目錄名稱設為weekly-report-demo，然後會有一些提示資訊需要你來確認,這邊我們不需要用到路由、單元測試等，所以不需要的地方填n，其他都是填y或回車就行，最終配置如下

基本配置完成後，我們會發現vue-cli非常友好的提示我們下一步操作，那就照著做唄,這邊window下命令列可能會卡主不退出導致不能輸入命令，其實配置工作已經完成了，遇到這種情況直接按ctrl+c退出當前步驟即可

cd weekly-report-demo
// 進入目錄後執行如下命令
npm install
複製程式碼

執行npm install 後會將腳手架所需的依賴全部下載下來，所以會等一陣子，和上面一樣，網不好就用cnpm

依賴下載完成後，腳手架就算搭建完成了，執行提示的命令，效果如下

npm run dev
複製程式碼

至此，腳手架搭建完成。下面的更新都會提交到github

需要關心的目錄結構

執行完上面一系列的操作後，我們得到一個目錄結構，其中，原始檔在src目錄下，index.html則是預設頁面，main.js是js的入口檔案。其他的後面依次介紹。先來看看index.html的內容

明明什麼都沒有，只有一個div，怎麼最終執行在瀏覽器的頁面上有那麼多東西呢？客官莫慌，webpakc會自動為頁面引入編譯後的程式碼，實際到瀏覽器的時候，頁面的結構其實已經變成這樣了

這中間是怎麼實現的，就不做過多說明，我們只需要知道這是webpack在背後做的事情，而開發者只需要把精力放在頁面的開發上即可，這就是腳手架出現的原因--因為人是懶惰的。。

回到main.js，我們可以看到一個vue的例項，如果你看過官方文件，就不難理解了，這裡將vue的例項掛載在html中的id為app的div上，還引入了一個app元件，這裡還設定了Vue.config.productionTip = false來關閉生產模式下給出的提示

繼續看app元件，我們可以將app元件理解成一個大的元件，其中可以包括其他子元件，vue的一大特點是元件化，而其元件都可以放在一個.vue的檔案中，並且有其自身的寫法，主要包含三個片段：

template 元件的html模板，且必須包含在一個塊級元素內！ script 元件的script內容，包括元件的資料、邏輯處理、互動等 style 元件的樣式

有沒有覺得很熟悉，不就是一個html檔案換換樣子嘛。。在app元件中我們看到引用了components資料夾下的hello元件，繼續看下這個hello元件，這邊我們就看到了，通過npm run dev編譯出來的頁面上面的內容原來來自這個hello元件，嘗試著改一下內容看看嘗試修改hello元件的內容這時就會發現，修改的內容在頁面上動態更新了，而不需要我們手動重新整理頁面，有興趣的可以去google下熱過載來了解更多，此處不多做贅述

接下來，就可以參照這個示例的寫法，來實現一個週報填寫小demo

需求分析

在開始編寫程式碼前，先簡單分析一下需求，大概介面如下

左邊是編輯區，右邊是預覽區，編輯區可以選擇人員，選擇任務型別，輸入內容，而右邊則是把內容展現出來。這邊我們可以分別將兩塊內容提取成兩個元件，分別為editor和preview，為了省事，這裡在build/webpack.base.config.js中把eslint對vue檔案的語法檢查規則註釋掉，否則會遇到很多語法報錯（注意，修改了配置檔案後，需要ctrl+c退出，並重新執行npm run dev）新增兩個元件，取消語法檢查

至此，可以看到新增的兩個元件已經出現在頁面上了，就是沒有樣式比較醜，接下來增加一些樣式。在增加樣式之前，針對不同的瀏覽器，在日常工作中通常會引入一個類似common.css的檔案來取消各個瀏覽器的預設樣式，以確保我們的樣式在不同瀏覽器下表現一致。在本次專案中，也需要引入這樣一個東西--reset.css,執行如下命令安裝reset.css依賴

npm i --s reset.css
複製程式碼

在main.js中引入reset.css 引入reset.css，刪除多餘樣式

css語法使用stylus，這樣層次比較分明，也可以直接用css 輸入如下命令安裝stylus依賴

npm i --save-dev stylus stylus-loader
複製程式碼

引入stylus並測試

至此，頁面是這個樣子

接下來，增加布局樣式基本佈局樣式

至此，頁面是這個樣子

接下來，完善編輯區，編輯區包含兩部分，人員資訊部分和內容輸入部分，其中人員資訊部分的大致需求如下

選擇人員
新增人員
刪除人員

輸入部分的的功能如下：

選擇任務型別
輸入任務內容
任務內容可編輯
刪除任務內容
儲存

先完成人員選擇部分，可以使用下拉框選擇，這裡可以引入一個基於vue2.x的元件庫element-ui，引入這個元件庫後一些常用的元件可以直接使用這個元件庫提供的樣式，便於開發。根據官網的指南,執行以下命令引入element-ui,安裝完成後，直接全部引入元件（圖省事兒。。）再從官網示例扒一個select元件