<cite id="sea2y"></cite>

<option id="sea2y"></option>

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

Awbeci 發布于2019-08-30 15:54 / 1799人閱讀

摘要：有目錄結構書寫方式組件集成項目構建等的約束，整個應用中是沒有文件的，所有的響應都是動態渲染的，包括里面的元信息路徑等。更多參考細說后端模板渲染客戶端渲染中間層服務器端渲染開發工具開發時主要會用到的工具。

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

作者：深予之 (@senntyou)

GPU云服務器云服務器 BAT 技術專家貢獻生態項目前端開發項目 web前端開發項目實例前端技術開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117114.html

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

摘要：有目錄結構書寫方式組件集成項目構建等的約束，整個應用中是沒有文件的，所有的響應都是動態渲染的，包括里面的元信息路徑等。更多參考細說后端模板渲染客戶端渲染中間層服務器端渲染開發工具開發時主要會用到的工具。 vue 前端項目技術選型、開發工具、周邊生態聲明：這不是一篇介紹 Vue 基礎知識的文章，需要熟悉 Vue 相關知識主架構：vue, vue-router, vuex UI 框...

enali 2019-08-23 14:14 評論0 收藏0
前端項目如何管理

摘要：前端項目如何管理前端項目的管理分為兩個維度項目內的管理與多項目之間的管理。具體可以參考項目如何進行多人協作開發。組件項目更不用說了，值得提一下的是組件項目的版本號應當符合語義化版本規范。前端項目如何管理前端項目的管理分為兩個維度：項目內的管理與多項目之間的管理。 1. 項目內的管理在一個項目內，當有多個開發者一起協作開發時，或者功能越來越多、項目越來越龐大時，保證項目井然有序的進...

bawn 2019-08-23 15:19 評論0 收藏0
react 前端項目技術選型、開發工具、周邊生態

摘要：更多參考通過庫掌握函數組件有些時候，我們想要動態的加載一些組件按需加載，比如在一個單頁面應用中頁面的組件頁面的組件頁面的組件只有真正要實例化當前頁面的時候，才會去加載相應的組件。 react 前端項目技術選型、開發工具、周邊生態聲明：這不是一篇介紹 React 基礎知識的文章，需要熟悉 React 相關知識主架構：react, react-router, redux, redux...

hersion 2019-08-30 15:54 評論0 收藏0
react 前端項目技術選型、開發工具、周邊生態

摘要：更多參考通過庫掌握函數組件有些時候，我們想要動態的加載一些組件按需加載，比如在一個單頁面應用中頁面的組件頁面的組件頁面的組件只有真正要實例化當前頁面的時候，才會去加載相應的組件。 react 前端項目技術選型、開發工具、周邊生態聲明：這不是一篇介紹 React 基礎知識的文章，需要熟悉 React 相關知識主架構：react, react-router, redux, redux...

kidsamong 2019-08-23 14:07 評論0 收藏0