亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Awbeci / 1873人閱讀

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

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

主架構(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

測試：vue-test-utils, jest

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

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

如果頁面比較簡單，可以只用 vue

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

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

2. 選擇 UI 框架

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

目前比較推薦的是：

element ui：餓了么出品

iview：一套很棒的 UI 框架

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

vux：移動端 UI 框架

mint-ui：移動端 UI 框架

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

muse-ui：移動端 UI 框架

vant：移動端 UI 框架

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

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

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

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

4. 開發(fā)工具

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

4.1 storybook

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

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

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

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

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

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

4.2 vue-devtools

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

安裝

通過 chrome 應(yīng)用商店安裝 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：數(shù)據(jù)校驗組件

vue-awesome-swiper：swiper 的封裝

vue-multiselect：下拉選擇組件

vue-i18n：國際化組件

v-charts：echarts 的封裝

后續(xù)

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

作者：深予之 (@senntyou)

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/117114.html

相關(guān)文章

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

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

    enali 評論0 收藏0

  • 前端項目如何管理

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

    bawn 評論0 收藏0

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

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

    hersion 評論0 收藏0

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

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

    kidsamong 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<