vue 前端項目技術選型、開發工具、周邊生態

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. 架構選型演進

1. 若是頁面比較簡單，能夠只用 vue
2. 若是須要本地路由功能，好比在單頁面應用（SPA）中維持多個頁面，而且能夠本地控制路由跳轉邏輯，這時就須要搭配使用 vue-router
3. 通常稍複雜的頁面都會遇到一些問題：組件之間的通訊問題（好比 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

做者：深予之 (@senntyou)

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）