成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài)

enali / 2547人閱讀

摘要：有目錄結(jié)構(gòu)書寫方式組件集成項(xiàng)目構(gòu)建等的約束，整個(gè)應(yīng)用中是沒有文件的，所有的響應(yīng)都是動(dòng)態(tài)渲染的，包括里面的元信息路徑等。更多參考細(xì)說(shuō)后端模板渲染客戶端渲染中間層服務(wù)器端渲染開發(fā)工具開發(fā)時(shí)主要會(huì)用到的工具。

vue 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài) 
聲明：這不是一篇介紹 Vue 基礎(chǔ)知識(shí)的文章，需要熟悉 Vue 相關(guān)知識(shí)

主架構(gòu)：vue, vue-router, vuex

UI 框架：element ui, iview, vuetify, vux, mint-ui, vue-material, muse-ui, vant, bootstrap-vue

服務(wù)器端渲染：nuxt.js

開發(fā)工具：storybook, vue-devtools, vue-loader

測(cè)試：vue-test-utils, jest

插件庫(kù)：better-scroll, Vue.Draggable, vee-validate, vue-awesome-swiper, vue-multiselect, vue-i18n, v-charts

1. 架構(gòu)選型演進(jìn)

如果頁(yè)面比較簡(jiǎn)單，可以只用 vue

如果需要本地路由功能，比如在單頁(yè)面應(yīng)用（SPA）中維持多個(gè)頁(yè)面，并且可以本地控制路由跳轉(zhuǎn)邏輯，這時(shí)就需要搭配使用 vue-router

一般稍復(fù)雜的頁(yè)面都會(huì)遇到一些問題：組件之間的通信問題（比如 A 組件想要改變 B 組件的數(shù)據(jù)）、跨組件數(shù)據(jù)儲(chǔ)存與共享問題（比如多頁(yè)面購(gòu)物車數(shù)據(jù)存儲(chǔ)）。vue 本身并不能很好的解決這個(gè)問題，需要搭配使用 vuex

2. 選擇 UI 框架

使用一個(gè)現(xiàn)成的 UI 框架，可以少寫很多代碼。

目前比較推薦的是：

element ui：餓了么出品

iview：一套很棒的 UI 框架

vuetify：google 材質(zhì)設(shè)計(jì)的實(shí)現(xiàn)

vux：移動(dòng)端 UI 框架

mint-ui：移動(dòng)端 UI 框架

vue-material：另一個(gè) google 材質(zhì)設(shè)計(jì)的實(shí)現(xiàn)

muse-ui：移動(dòng)端 UI 框架

vant：移動(dòng)端 UI 框架

3. 服務(wù)器端渲染

服務(wù)器端渲染用得最多的是 nuxt.js。

nuxt.js 有目錄結(jié)構(gòu)、書寫方式、組件集成、項(xiàng)目構(gòu)建等的約束，整個(gè)應(yīng)用中是沒有 html 文件的，所有的響應(yīng) html 都是 node 動(dòng)態(tài)渲染的，包括里面的元信息、css, js 路徑等。渲染過(guò)程中，nuxt.js 會(huì)根據(jù)路由，將首頁(yè)所有的組件渲染成 html，余下的頁(yè)面保留原生組件的格式，在客戶端渲染。

更多參考：細(xì)說(shuō)后端模板渲染、客戶端渲染、node 中間層、服務(wù)器端渲染（ssr）

4. 開發(fā)工具

開發(fā)時(shí)主要會(huì)用到的工具。

4.1 storybook

storybook 為組件開發(fā)搭建了一個(gè)強(qiáng)大的開發(fā)環(huán)境，并提供了以下的幾個(gè)功能：

提供了一個(gè)強(qiáng)大的 UI 組件管理頁(yè)面，可以很便捷、清晰的分組、管理多個(gè)組件或一個(gè)組件的多個(gè)不同狀態(tài)

在自動(dòng)化交互測(cè)試之外，可以很方便的進(jìn)行手動(dòng)交互測(cè)試，并且可以動(dòng)態(tài)改變組件參數(shù)，查看視圖變化

可以將組件預(yù)覽導(dǎo)出為靜態(tài)資源，這樣就可以很方便查看組件的文檔和不同參數(shù)對(duì)應(yīng)的不同視圖

還有一系列的插件，提供了很多額外的功能，幫助你更好的開發(fā)、測(cè)試、優(yōu)化組件

更多參考：react、vue 組件開發(fā)利器：storybook

4.2 vue-devtools

這是專門針對(duì) vue 組件開發(fā)的 chrome 開發(fā)者工具插件，就像開發(fā)者工具的 Elements 一樣，可以查看整個(gè)頁(yè)面的 vue 組件樹和每個(gè)組件的 data，并且可以動(dòng)態(tài)的更改 data，然后會(huì)更新 UI 到應(yīng)用上。

安裝

通過(guò) chrome 應(yīng)用商店安裝 chrome - vuejs-devtools.

其他安裝方式查看 vue-devtools.

4.3 vue-loader

加載 .vue 單文件組件的 webpack loader。

5. 測(cè)試

一般 vue 組件的測(cè)試，會(huì)用 vue-test-utils + jest / mocha / tape / ava。

6. 插件庫(kù)

一些很實(shí)用的插件庫(kù)：

better-scroll：iscroll 的封裝

Vue.Draggable：Sortable 的封裝

vee-validate：數(shù)據(jù)校驗(yàn)組件

vue-awesome-swiper：swiper 的封裝

vue-multiselect：下拉選擇組件

vue-i18n：國(guó)際化組件

v-charts：echarts 的封裝

后續(xù)

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100309.html

相關(guān)文章

  • vue 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài)

    摘要：有目錄結(jié)構(gòu)書寫方式組件集成項(xiàng)目構(gòu)建等的約束，整個(gè)應(yīng)用中是沒有文件的，所有的響應(yīng)都是動(dòng)態(tài)渲染的，包括里面的元信息路徑等。更多參考細(xì)說(shuō)后端模板渲染客戶端渲染中間層服務(wù)器端渲染開發(fā)工具開發(fā)時(shí)主要會(huì)用到的工具。 vue 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài) 聲明：這不是一篇介紹 Vue 基礎(chǔ)知識(shí)的文章，需要熟悉 Vue 相關(guān)知識(shí) 主架構(gòu)：vue, vue-router, vuex UI 框...

    Awbeci 評(píng)論0 收藏0

  • 前端項(xiàng)目如何管理

    摘要：前端項(xiàng)目如何管理前端項(xiàng)目的管理分為兩個(gè)維度項(xiàng)目?jī)?nèi)的管理與多項(xiàng)目之間的管理。具體可以參考項(xiàng)目如何進(jìn)行多人協(xié)作開發(fā)。組件項(xiàng)目更不用說(shuō)了，值得提一下的是組件項(xiàng)目的版本號(hào)應(yīng)當(dāng)符合語(yǔ)義化版本規(guī)范。 前端項(xiàng)目如何管理 前端項(xiàng)目的管理分為兩個(gè)維度：項(xiàng)目?jī)?nèi)的管理與多項(xiàng)目之間的管理。 1. 項(xiàng)目?jī)?nèi)的管理 在一個(gè)項(xiàng)目?jī)?nèi)，當(dāng)有多個(gè)開發(fā)者一起協(xié)作開發(fā)時(shí)，或者功能越來(lái)越多、項(xiàng)目越來(lái)越龐大時(shí)，保證項(xiàng)目井然有序的進(jìn)...

    bawn 評(píng)論0 收藏0

  • react 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài)

    摘要：更多參考通過(guò)庫(kù)掌握函數(shù)組件有些時(shí)候，我們想要?jiǎng)討B(tài)的加載一些組件按需加載，比如在一個(gè)單頁(yè)面應(yīng)用中頁(yè)面的組件頁(yè)面的組件頁(yè)面的組件只有真正要實(shí)例化當(dāng)前頁(yè)面的時(shí)候，才會(huì)去加載相應(yīng)的組件。 react 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài) 聲明：這不是一篇介紹 React 基礎(chǔ)知識(shí)的文章，需要熟悉 React 相關(guān)知識(shí) 主架構(gòu)：react, react-router, redux, redux...

    hersion 評(píng)論0 收藏0

  • react 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài)

    摘要：更多參考通過(guò)庫(kù)掌握函數(shù)組件有些時(shí)候，我們想要?jiǎng)討B(tài)的加載一些組件按需加載，比如在一個(gè)單頁(yè)面應(yīng)用中頁(yè)面的組件頁(yè)面的組件頁(yè)面的組件只有真正要實(shí)例化當(dāng)前頁(yè)面的時(shí)候，才會(huì)去加載相應(yīng)的組件。 react 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài) 聲明：這不是一篇介紹 React 基礎(chǔ)知識(shí)的文章，需要熟悉 React 相關(guān)知識(shí) 主架構(gòu)：react, react-router, redux, redux...

    kidsamong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<