国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

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

miya / 1536人閱讀

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

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

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

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

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

自動(dòng)化交互測(cè)試可以使用 enzyme，但很多時(shí)候還得手動(dòng)測(cè)試，就比較麻煩了

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

所以，storybook 就是為了解決這些問(wèn)題而出現(xiàn)的，它為你的組件搭建了一個(gè)強(qiáng)大的開(kāi)發(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)的不同視圖

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

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

react-dates 的 storybook react-dates - storybook

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

再順便截個(gè)圖吧

1. 框架適配

React

React Native

Vue

Angular

Polymer

Mithril: 目前尚處 alpha 階段

Marko: 目前尚處 alpha 階段

HTML: 目前尚處 alpha 階段

Svelte: 目前尚處 alpha 階段

Riot : 目前尚處 alpha 階段

2. 開(kāi)發(fā)與命令 2.1 如何寫(xiě)一個(gè) story

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

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

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

# 運(yùn)行 storybook
npm run storybook

如果需要手動(dòng)添加 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"
}

# 運(yùn)行命令
npm run export-storybook
3. 后續(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://specialneedsforspecialkids.com/yun/97691.html

相關(guān)文章

  • react 前端項(xiàng)目技術(shù)選型、開(kāi)發(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ù)選型、開(kāi)發(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ù)選型、開(kāi)發(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ù)選型、開(kāi)發(fā)工具、周邊生態(tài) 聲明：這不是一篇介紹 React 基礎(chǔ)知識(shí)的文章，需要熟悉 React 相關(guān)知識(shí) 主架構(gòu)：react, react-router, redux, redux...

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

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

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

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

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

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

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

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

0條評(píng)論

miya

男|高級(jí)講師

TA的文章

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