2016的最后一天，多多少少都應該總結一下這一年的得失，哪里做的好，哪里需要改進，記一筆，或許將來會用到呢。
畢業差不多半年了，一直是一個人在負責公司項目的前端開發與維護，當時公司希望前后端分離，提高前端的開發效率和后期維護的便捷，所以自己在經過一番調查后，決定采用SPA的模式，其主要原因還是阿里中途島的那樣的東西，我們沒辦法搞出來。
項目不需要兼容IE8及以下的瀏覽器，所以在選型的時候果斷選了Vue.js那一套的東西，因為react之前也有了解過，上手的確沒Vue來的快。
除去舊項目的維護時間，使用vue也有三個多月了，寫一寫這段時間來的使用心得吧
1. 如何划分組件和模塊
組件化開發已經是談了很久的東西了，在沒有實戰經驗之前，看看民工大哥還有一些其他前輩寫的博客，感覺這東西真的好牛叉，太好用了，但真當動手開始做的時候才會發現，其實並沒有想象的那么簡單和美好。具體的問題可以參考這篇文章Vue.js實踐。
在組件的划分上，我把比較籠統的組件（components）分成了部件（widgets）和模塊（modules）兩個部分，部件主要是一些功能型的東西，而模塊則是通過UI樣式去定義。
我們從源頭分析一下，一個網站是通過很多頁面組成的，而每個頁面有包含了不同的塊，每個塊則是通過不同的元素構成，這些元素我們可以把它想象成部件，也就是頁面的最小構成單位。
但是在實際的開發當中，我並沒有把所有元素都寫成部件，而是一些功能型並且會重復使用的元素，才會寫成部件，比如下拉框、切換開關等
而對於模塊，則是包含了多個元素，里面也可能會存在部件，比如：
不管是部件還是模塊，其目的都是為了復用，都可以統稱為組件，之所以要這樣划分成兩個類別，是為了層次更加清晰，職責單一明確，更容易管理與維護。
當然，並不是所有UI樣子差不多或者一樣的地方都會把它寫成組件，比如：
這兩個導航，樣式都一樣的，但是用一個通用的樣式或許會比寫一個組件更加方便，這樣就能減少一個組件的數據處理了。
2.組件樣式
以前最頭疼的就是class命名了，不過很慶幸的是Vue以自己的方式實現了shadow DOM。利用shadow DOM，使用BEM的命名方式，再配合單一職責的樣式划分，再也不用擔心class如何命名了。
使用BEM規范的命名方式的好處我這里不多說，大家可以自己百度，但是缺點就是class名往往可能會出現好長一串，這時利用shadow DOM可以很好的解決這個問題。
所有的模塊里面所包含的元素無非也就那些：header、navicat、title、list、item、text......在開發的時候我寫了一個規范，BEM三個部分分別都由哪些來構成，基本能滿足所有的模塊，幾遍模塊里有亂七八糟的一堆元素。后面會貼上命名規范。
使用單一職責的樣式主要是為了解決組件組合拼湊的問題，在實際開發中，幾遍看上去功能一樣，UI也基本相同的地方，但是UI設計人員也可能會做出一些讓人很郁悶的圖，使得組件的呈現和布局樣式不同，更別說是用在功能內容都不一樣的地方了。
這個時候為了更好、更簡單清晰的實現布局，變會使用一些單一職責的樣式，比如：
就像這三張圖，明明就同一個東西，非要搞差異化，如果這些都寫在一個組件里，並不是不行，但是卻很麻煩，但是如果我們組件寫好一個基礎的樣式，另外的直接通過添加單一職責樣式的class名，這樣就方便多了。當然最好還是和UI同學商量，保持UI的一致性原則，不要為了自以為的好看，閉着眼睛亂畫圖。
當然，在同一個組件里的樣式肯定還是需要通過prop之類的操作，但是在外部的布局和展現方面，我們可以在引用組件的時候，直接添上需要的class名就行了，這里不展示具體代碼了。
3.工程結構
直接上圖吧，實在不想寫了，着急回家啊。
assets文件夾里的less文件夾放的就是一些單一功能的樣式，比如layout.less文件里：
/* 上外邊距 */ .mt30 { margin-top: 30px; } .mt60 { margin-top: 60px; } /* 右外邊距 */ .mr30 { margin-right: 30px; } .mr70 { margin-right: 70px; } .mr90 { margin-right: 90px; } /* 底外邊距 */ .mb20 { margin-bottom: 20px; } /* 左外邊距 */ .ml30 { margin-left: 30px; } .ml40 { margin-left: 40px; } .ml70 { margin-left: 70px; }
components文件夾里的就更清楚了，widgets放一些公用的小部件，modules里放公共模塊，而pages里就是各個頁面了。
規范明后天再來貼。。。先回家了，實在坐不住了