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

資訊專欄INFORMATION COLUMN

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

miya / 1546人閱讀

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

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

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

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

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

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

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

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

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

在自動(dòng)化交互測試之外，可以很方便的進(jìn)行手動(dòng)交互測試，并且可以動(dòng)態(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

再順便截個(gè)圖吧

1. 框架適配

React

React Native

Vue

Angular

Polymer

Mithril: 目前尚處 alpha 階段

Marko: 目前尚處 alpha 階段

HTML: 目前尚處 alpha 階段

Svelte: 目前尚處 alpha 階段

Riot : 目前尚處 alpha 階段

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

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

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

# 初始化已有項(xiàng)目（不會(huì)對原項(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

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

    摘要：更多參考通過庫掌握函數(shù)組件有些時(shí)候，我們想要?jiǎng)討B(tài)的加載一些組件按需加載，比如在一個(gè)單頁面應(yīng)用中頁面的組件頁面的組件頁面的組件只有真正要實(shí)例化當(dāng)前頁面的時(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 評論0 收藏0

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

    摘要：更多參考通過庫掌握函數(shù)組件有些時(shí)候，我們想要?jiǎng)討B(tài)的加載一些組件按需加載，比如在一個(gè)單頁面應(yīng)用中頁面的組件頁面的組件頁面的組件只有真正要實(shí)例化當(dāng)前頁面的時(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 評論0 收藏0

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

    摘要：有目錄結(jié)構(gòu)書寫方式組件集成項(xiàng)目構(gòu)建等的約束，整個(gè)應(yīng)用中是沒有文件的，所有的響應(yīng)都是動(dòng)態(tài)渲染的，包括里面的元信息路徑等。更多參考細(xì)說后端模板渲染客戶端渲染中間層服務(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 評論0 收藏0

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

    摘要：有目錄結(jié)構(gòu)書寫方式組件集成項(xiàng)目構(gòu)建等的約束，整個(gè)應(yīng)用中是沒有文件的，所有的響應(yīng)都是動(dòng)態(tài)渲染的，包括里面的元信息路徑等。更多參考細(xì)說后端模板渲染客戶端渲染中間層服務(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 框...

    enali 評論0 收藏0

發(fā)表評論

0條評論

miya

男|高級講師

TA的文章

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