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

資訊專欄INFORMATION COLUMN

前端進(jìn)階（7） - react、vue 組件開發(fā)利器：storybook

miya / 1611人閱讀

摘要：組件開發(fā)利器對于前端開發(fā)來說，組件化技術(shù)已經(jīng)是一門必修課了，這其中又主要以和為主。

react、vue 組件開發(fā)利器：storybook

對于前端開發(fā)來說，組件化技術(shù)已經(jīng)是一門必修課了，這其中又主要以 react 和 vue 為主。但平時在開發(fā)組件，尤其是公共組件或者第三方組件庫的時候，往往會有一些困擾：

不能很好的管理多個組件，尤其是在組件預(yù)覽的時候，不能一目了然

在組件預(yù)覽的時候，也不能很好的反應(yīng)一個組件的多個不同狀態(tài)

自動化交互測試可以使用 enzyme，但很多時候還得手動測試，就比較麻煩了

在寫文檔的時候，需要將組件預(yù)覽和文檔寫在一起，并需要切換到不同的狀態(tài)，就比較吃力了

所以，storybook 就是為了解決這些問題而出現(xiàn)的，它為你的組件搭建了一個強大的開發(fā)環(huán)境，主要提供了以下的幾個功能：

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

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

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

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

社區(qū)已經(jīng)有很多組件庫都在使用 storybook 開發(fā)，比如：

react-dates 的 storybook react-dates - storybook

react-native-web 的 storybook react-native-web - storybook

再順便截個圖吧

1. 框架適配

React

React Native

Vue

Angular

Polymer

Mithril: 目前尚處 alpha 階段

Marko: 目前尚處 alpha 階段

HTML: 目前尚處 alpha 階段

Svelte: 目前尚處 alpha 階段

Riot : 目前尚處 alpha 階段

2. 開發(fā)與命令 2.1 如何寫一個 story

查看 storybook - Writing Stories，了解怎么寫 stories 與怎么用插件。

2.2 添加 storybook 
# 安裝全局命令
npm i -g @storybook/cli

# 初始化已有項目（不會對原項目產(chǎn)生影響，只添加必要的配置與腳本而已）
cd my-project-directory
getstorybook

# 運行 storybook
npm run storybook

如果需要手動添加 storybook 或它的插件，可以查看：

Storybook for React

Storybook for Vue

Storybook for Angular

2.3 將組件預(yù)覽導(dǎo)出為靜態(tài)資源 
# 添加到 package.json 的 scripts
{
  "export-storybook": "build-storybook -c .storybook -o .out"
}

# 運行命令
npm run export-storybook
3. 后續(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/97691.html

相關(guān)文章

  • 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

  • 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 框...

    Awbeci 評論0 收藏0

  • 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

發(fā)表評論

0條評論

miya

男|高級講師

TA的文章

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