vue 前端項目技術選型、開發工具、周邊生態
聲明：這不是一篇介紹 Vue 基礎知識的文章，需要熟悉 Vue 相關知識
- 主架構：vue, vue-router, vuex
- UI 框架：element ui, iview, vuetify, vux, mint-ui, vue-material, muse-ui, vant, bootstrap-vue
- 服務器端渲染：nuxt.js
- 開發工具：storybook, vue-devtools, vue-loader
- 測試：vue-test-utils, jest
- 插件庫：better-scroll, Vue.Draggable, vee-validate, vue-awesome-swiper, vue-multiselect, vue-i18n, v-charts
1. 架構選型演進
- 如果頁面比較簡單，可以只用
vue - 如果需要本地路由功能，比如在單頁面應用（SPA）中維持多個頁面，並且可以本地控制路由跳轉邏輯，這時就需要搭配使用
vue-router - 一般稍複雜的頁面都會遇到一些問題：組件之間的通信問題（比如 A 組件想要改變 B 組件的數據）、跨組件數據儲存與共享問題（比如多頁面購物車數據存儲）。
vue本身並不能很好的解決這個問題，需要搭配使用vuex
2. 選擇 UI 框架
使用一個現成的 UI 框架，可以少寫很多代碼。
目前比較推薦的是：
- element ui：餓了麼出品
- iview：一套很棒的 UI 框架
- vuetify：google 材質設計的實現
- vux：移動端 UI 框架
- mint-ui：移動端 UI 框架
- vue-material：另一個 google 材質設計的實現
- muse-ui：移動端 UI 框架
- vant：移動端 UI 框架
3. 服務器端渲染
服務器端渲染用得最多的是 nuxt.js。
nuxt.js 有目錄結構、書寫方式、組件集成、項目構建等的約束，整個應用中是沒有 html 文件的，所有的響應 html 都是 node 動態渲染的，包括裏面的元信息、css, js 路徑等。渲染過程中，nuxt.js 會根據路由，將首頁所有的組件渲染成 html，餘下的頁面保留原生組件的格式，在客戶端渲染。
更多參考：細說後端模板渲染、客戶端渲染、node 中間層、服務器端渲染（ssr）
4. 開發工具
開發時主要會用到的工具。
4.1 storybook
storybook 爲組件開發搭建了一個強大的開發環境，並提供了以下的幾個功能：
- 提供了一個強大的 UI 組件管理頁面，可以很便捷、清晰的分組、管理多個組件或一個組件的多個不同狀態
- 在自動化交互測試之外，可以很方便的進行手動交互測試，並且可以動態改變組件參數，查看視圖變化
- 可以將組件預覽導出爲靜態資源，這樣就可以很方便查看組件的文檔和不同參數對應的不同視圖
- 還有一系列的插件，提供了很多額外的功能，幫助你更好的開發、測試、優化組件
更多參考：react、vue 組件開發利器：storybook
4.2 vue-devtools
這是專門針對 vue 組件開發的 chrome 開發者工具插件，就像開發者工具的 Elements 一樣，可以查看整個頁面的 vue 組件樹和每個組件的 data，並且可以動態的更改 data，然後會更新 UI 到應用上。
安裝
通過 chrome 應用商店安裝 chrome - vuejs-devtools.
其他安裝方式查看 vue-devtools.
4.3 vue-loader
加載 .vue 單文件組件的 webpack loader。
5. 測試
一般 vue 組件的測試，會用 vue-test-utils + jest / mocha / tape / ava。
6. 插件庫
一些很實用的插件庫：
- better-scroll：iscroll 的封裝
- Vue.Draggable：Sortable 的封裝
- vee-validate：數據校驗組件
- vue-awesome-swiper：swiper 的封裝
- vue-multiselect：下拉選擇組件
- vue-i18n：國際化組件
- v-charts：echarts 的封裝
後續
更多博客，查看 https://github.com/senntyou/blogs
版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）