資訊專欄INFORMATION COLUMN
摘要：有目錄結構書寫方式組件集成項目構建等的約束，整個應用中是沒有文件的，所有的響應都是動態渲染的，包括里面的元信息路徑等。更多參考細說后端模板渲染客戶端渲染中間層服務器端渲染開發工具開發時主要會用到的工具。
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 storybookstorybook 為組件開發搭建了一個強大的開發環境，并提供了以下的幾個功能：
提供了一個強大的 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許可證）
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100309.html
摘要：有目錄結構書寫方式組件集成項目構建等的約束，整個應用中是沒有文件的，所有的響應都是動態渲染的，包括里面的元信息路徑等。更多參考細說后端模板渲染客戶端渲染中間層服務器端渲染開發工具開發時主要會用到的工具。 vue 前端項目技術選型、開發工具、周邊生態 聲明：這不是一篇介紹 Vue 基礎知識的文章，需要熟悉 Vue 相關知識 主架構：vue, vue-router, vuex UI 框...
摘要：更多參考通過庫掌握函數組件有些時候，我們想要動態的加載一些組件按需加載，比如在一個單頁面應用中頁面的組件頁面的組件頁面的組件只有真正要實例化當前頁面的時候，才會去加載相應的組件。 react 前端項目技術選型、開發工具、周邊生態 聲明：這不是一篇介紹 React 基礎知識的文章，需要熟悉 React 相關知識 主架構：react, react-router, redux, redux...
摘要：更多參考通過庫掌握函數組件有些時候，我們想要動態的加載一些組件按需加載，比如在一個單頁面應用中頁面的組件頁面的組件頁面的組件只有真正要實例化當前頁面的時候，才會去加載相應的組件。 react 前端項目技術選型、開發工具、周邊生態 聲明：這不是一篇介紹 React 基礎知識的文章，需要熟悉 React 相關知識 主架構：react, react-router, redux, redux...
閱讀 1437·2019-08-29 17:14
閱讀 1645·2019-08-29 12:12
閱讀 727·2019-08-29 11:33
閱讀 3261·2019-08-28 18:27
閱讀 1441·2019-08-26 10:19
閱讀 904·2019-08-23 18:18
閱讀 3524·2019-08-23 16:15
閱讀 2539·2019-08-23 14:14
