撰寫日期：2020-07-23 撰稿人：彭成剛 轉載需經本人同意。
Vue前端項目架構梳理
后期可以將TypeScript加入到項目來，對參數的數據類型進行更嚴格的校驗。
現在主流就 Vue 和 React，Angular也可以看看，因為你在看React+TS的時候，我覺得內容量和坑的個數就挺多的。這里項目用的是Vue的技術棧。基本就是在這個基礎上添加或刪除一下模塊就又可以使用。
為什么會有這么多模塊？它們是怎么來的？
18年前的技術棧
2004年開始出來搞，那個時候還是搞門戶網站。照着新浪搞一個，當時還都這種思路。小網站也是一樣，技術棧一樣，業務簡單很多。但是本質不一樣的是，那個時候還不是軟件開發，是網站開發。
簡單分，分為 靜態網站 和 動態網站。
靜態網站：html 放到服務器，ok了。 動態網站: 靜態網站 + 動態語言 + 鏈接數據庫
如今前端的輸出項是什么？
先不考慮任何架構，沒有任何軟件，沒有任何包。那么18年前是要什么？對，就是要發布的index.html。現如今也是一樣，把做好的index.html發布到服務器。至於是IIS Tomcat Apache等等不在這次前端的分析范疇。
讓我們從index.html 進行技術棧的逆推
- 要有index.html，就需要將整個項目工程打包。比如項目有10萬個文件，發布的時候，打包成20個文件。這里就要有打包的概念，WebPack就是專業做打包文件的工作。
- WebPack對文件進行打包，對本地文件進行操作，但是js本身沒有權限，這時候就需要一個平台，這個平台就是Node.js，讓javascript有像C JAVA Net等語言一樣的權限。
- 現在瀏覽器支持的ES5，雖然支持，但是寫代碼還是不簡單，效率起不來。然后出現了 ES6，這下可是厲害了，我滴神，可是瀏覽器不支持，人家只支持ES5，所以需要有個人來將ES6的代碼轉換成ES5，就ok了，所以Babel就是專門干轉換代碼這件事情的。
- ES6寫起來太爽了，各種語法隨便寫，人一多，都看不動別人的代碼風格了。怎么辦，大家要統一代碼風格啊，這就出現了Eslint，對代碼風格進行了定義和規范。有的人說了，老子就是牛，我就不改，寫了這么多年習慣了，別忘了，有保存自動格式化代碼喲。
- 基礎架構終於有了，可以擼代碼了，發現html對數據表單的保存維護能整死人，開發效率極低，需要有一個數據，這個數據就是老大，所有人看這個數據，數據一變化，所有人都根據這個數據變化。這就是數據雙向綁定概念，可以用Vue或React。就從最新版本來說Vue3.0已經和React一樣，用哪個不重要，你用過就會發現，他們都是要求你有非常好的js能力。
- Vue有是有了，但是架構文件那個多啊，自己要整理一遍，N天就這么過去，得有大神幫我寫好了，然后我一下載就直接開擼啊！有啊，必須有啊！那個叫 @vue/cli-service,vue腳手架，專業搬磚師，苦活累活人家全包。
- Vue腳手架有了，但是不能就寫幾個字呀？得好看啊，得有UI層啊！市面上很多，我們這里選擇是VIEW-Design，里面包含基本的按鈕，下拉，表格等等。當然你也能自己寫，如果有那個時間的話。
- UI層有了，可是厲害了，但是顯示的內容可是動態的，得是后台傳過來。得有異步Ajax，這里就選擇 Axios。專業代購幾十年，棒棒噠！
- 這回數據有了，UI有了，頁面牛X了。好像哪里不對，啊！就一個頁面，咱們的傳統url概念在這里失效了，怎么辦，得有url啊！得多頁面啊！所以，vue-router，就是專業干這個url的事情。
- 多頁面也有了，開始寫業務邏輯吧，一個變量里里外外80多個地方傳，這組件也太難用了吧，改一個變量，80多個地方，就沒有個全局變量用用嗎？必須有！vuex，就是你要的全局變量，一次賦值到處使用，快快用起來吧。
- 整體還行，可是人家對樣式細節各種改，這css是不是也得升級升級，也得支持個全局變量什么的，得各種功能超厲害的樣子呢？LESS就是把傳統css各種升級，各種高大上。
- 萬事齊全，開擼。后台你接口怎么沒寫呢！我得用啊！后台：你前台先寫完，我再寫。這沒了后台還不干活了嗎？Mockjs，制假售假，假數據專業締造者！有了假數據，我就不用連真接口了，統統假滴！
- 客戶要圖表？Echarts上！客戶要無限目錄樹，各種騷操作的改？VueTreeSelect上！客戶要前台自定義打印？print-js上？小函數懶的自己寫？lodash上？
- 什么還有需求？自己上github找7！！
基礎設施
底層庫基本第一次安裝完就不再設置了。
Node.js
nodejs中文網: http://nodejs.cn/
官方介紹：Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行時。
個人介紹：天地初開，萬物皆來。初級學員不需要太細致了解這塊，裝上了，注意一下
版本號即可。
WebPack
WebPack官網：https://www.webpackjs.com/
官方介紹：打包所有的樣式 腳本 資源 圖片
個人介紹：不僅僅是打包，還有腳本代碼壓縮功能喲
@vue/cli-service
Vue腳手架官網：https://cli.vuejs.org/zh/guide/cli-service.html
官方介紹：Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統
個人介紹：你不用腳手架，你難道還想手寫一個嗎？好吧，你需要手寫一個，但是是在學習階段。
Babel
Babel官網：https://www.babeljs.cn/
官方介紹：Babel 是一個 JavaScript 編譯器。
個人介紹：不用了解也能用，了解了的都成大神了。
Eslint
Eslint官網：https://eslint.org/
官方介紹：Find and fix problems in your JavaScript code
個人介紹：一定要用，用了就沒有選擇困難症了。
前台核心基本功
ES6
ES6官網：https://es6.ruanyifeng.com/
官方介紹：《ECMAScript 6 入門教程》是一本開源的 JavaScript 語言教程，全面介紹 ECMAScript 6 新引入的語法特性。
個人介紹：ES6還不熟？沒事，多通宵幾次就熟了~ 珍惜頭發，遠離ES6，還有7.8.9.10.11哦~
VUE 2.x
Vue官網：https://cn.vuejs.org/v2/guide/
官方介紹：Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
個人介紹：數據雙向綁定，tree shaking，各種事件屬性方法。基本功，建議React同時學，一起用的時候，有個對照，你會發現你的ES6還能提高水平。
vue-router
vue-router官網：https://router.vuejs.org/zh/
官方介紹：Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。
個人介紹：由於是單頁面程序，url的概念就沒有了，這個就是頁面內的url
vuex
vuex官網：https://vuex.vuejs.org/zh/
官方介紹：Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
個人介紹：簡單理解就是全局變量
Axios
Axios官網：http://www.axios-js.com/zh-cn/
官方介紹：易用、簡潔且高效的http
個人介紹：當年的Ajax，如今的Axios
LESS
LESS中文官網：http://lesscss.cn/
官方介紹：Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。Less 可以運行在 Node 或瀏覽器端。
個人介紹：css如果不用模塊化的思想進行開發，后期改的時候，不考慮頭發的感受嗎？
VIEW-Design
VIEW-Design官網：https://www.iviewui.com/
官方介紹：View UI，即原先的 iView，是一套基於 Vue.js 的開源 UI 組件庫，主要服務於 PC 界面的中后台產品。
個人介紹：一個小秘密。讀源碼，快速增加Vue功底哦！你可以從簡單的Button來哦~
一般常用拓展庫
Echarts
Echarts官網：https://echarts.apache.org/zh/index.html
官方介紹：ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。
個人介紹：我只能說，這個要是復雜起來，沒你想象的那么簡單。
VueTreeSelect
VueTreeSelect官網：https://vue-treeselect.js.org/
官方介紹：vue-treeselect is a multi-select component with nested options support for Vue.js.
個人介紹：非常強大的異步樹，基本上該有的事件都有，能滿足95%左右的需求。剩下5%的需求，看看合理不合理吧。
print-js
print-js官網：https://printjs.crabbly.com/
官方介紹：A tiny javascript library to help printing from the web.
個人介紹：它能打印很“干凈”的頁面，但是需要改些參數，得找找參數喲。
js-cookie
js-cookie官網：https://github.com/js-cookie/js-cookie
官方介紹：A simple, lightweight JavaScript API for handling cookies
個人介紹：這年頭出來擼，誰不和cookie打交道
lodash
lodash官網：https://www.lodashjs.com/
官方介紹：Lodash是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。
個人介紹：多看看人家源碼，對提升很有幫助，各個短小精悍。
Mockjs
Mockjs官網：http://mockjs.com/
官方介紹：生成隨機數據，攔截 Ajax 請求
個人介紹：開始做Demo時候的必須品。
架構圖
Other
自己之前整理的技術文檔細節
Reciter資料庫：http://pengchenggang.gitee.io/reciterdoc/documents/
希望對你有所幫助。