心得分享：前端框架搭建參考( vue、react )
從工作之初的requirejs，又經歷了nwjs、nodejs，到現在的vue、react-redux、react-native，也走過了一段不長不短的前端開發之路。本篇將分享一下我的前端框架的一點理解。現在最流行的前端框架要數 vue 和 react。按經驗，偏中、小型、要短時間內看到成果的我一般選擇使用 vue 開發；偏大型，對效能和維護要求較高的我會選擇用 react，個人偏好是更喜歡 react 的。針對vue 和 react 框架，我分別搭建了一套vue+vuex+router+stylus 和 react+redux+router+stylus 的參考框架例項，同時，裡面還封裝了基本的mvc模型、路由、代理、token驗證、懶載入、http請求、iconfont管理還有css樣式管理等模組，目錄結構請參考原始碼，如有不正確的地方請多多指正，原始碼 GitHub 地址：
react+redux+router+stylus 框架：https://github.com/smallH/react-web-project.git
vue+vuex+router+stylus 框架：https://github.com/smallH/vue-web-project.git
-
mvc模型和路由
vue目前較好的自然是 vuex 模型，而react一般選用是 redux。vuex 和 redux 都有一套規範的實現流程，對照著官網的語法和規範寫就好。這裡想講講的是路由，路由一般分Hash和History兩種模式，它們都屬於瀏覽器自身的特性。Hash模式下在訪問時地址中會帶‘#’號，如
-
重置瀏覽器樣式
前端開發除錯一般使用谷歌或火狐瀏覽器，在專案開發前要注意一定要重置瀏覽器預設樣式，否則進入質保測試階段很多麻煩就來了，各種由瀏覽器預設樣式差異引起的Bug，所以在開發專案前都應該注意：匯入一個樣式檔案，實現各類瀏覽器初始樣式都一致。
-
代理服務
開發階段一般是前後端分離，前端在local本地除錯，這時請求服務端介面API通常會發生跨域異常，幸運的是，vue和react都提供可代理服務的模組，通過代理服務解決這類的跨域請求的問題。關於代理，vue的服務代理在config/index.js中配置，react在package.json中配置。
-
token和許可權驗證
token驗證一般在兩個地方，一個是發起http請求時，另一個是路由切換頁面時。發起http請求可以使用axios模組或fetch模組，以axios為例，在請求前進行攔截，把token新增到請求頭Header中並一起帶給服務端，讓伺服器去驗證token有效性。其次在路由切換頁面時，可以驗證當前token值是否存在或該頁面本使用者是否有許可權開啟，許可權配置可以從服務端獲取。react專案一般使用fetch 替代 axios 。
-
json-server
json-server是一個模擬後端資料介面的模組，當後端團隊的api介面還沒完成時，前端可以通過json-server由自己來模擬後臺資料，這樣就可以實現部分功能的前後端聯調。
-
元件庫
開發團隊比較大的一般可以按需自己開發元件庫。我們也可以選擇第三方元件庫，vue通常會選擇ElementUI或IView，ElememntUI的維護更新團隊會比IView的大，ElememntUI當遇到大資料對部分元件（如樹狀列表）渲染時效能較好，故我會使用ElementUI。react 通常會使用 ant.design。
-
圖示管理
圖示可以使用iconfont管理，它可以進行團隊協作製作和程式碼匯出、svg匯出，同時還有大批量的可參考樣式設計，非常適合作為前端專案的圖示管理。
-
樣式管理
通常引用stylus作為樣式的預編譯，vue直接模板檔案中使用<style lang="stylus" rel="stylesheet/stylus" scoped>寫樣式即可，react可以通過react-css-modules來模組化管理樣式，也可以通過命名樣式常量，通過內嵌的方法管理樣式。
總之，文字在程式碼面前是多麼的蒼白，程式設計師最實在的還是看原始碼吧！希望這兩個框架模型能給一些初學 vue 和 reacr 搭建框架的朋友會有所幫助和參考作用，一起加油噢！！！