資訊專欄INFORMATION COLUMN
摘要：組件開發利器對于前端開發來說，組件化技術已經是一門必修課了，這其中又主要以和為主。
react、vue 組件開發利器：storybook
對于前端開發來說，組件化技術已經是一門必修課了，這其中又主要以 react 和 vue 為主。但平時在開發組件，尤其是公共組件或者第三方組件庫的時候，往往會有一些困擾：
不能很好的管理多個組件，尤其是在組件預覽的時候，不能一目了然
在組件預覽的時候，也不能很好的反應一個組件的多個不同狀態
自動化交互測試可以使用 enzyme，但很多時候還得手動測試，就比較麻煩了
在寫文檔的時候，需要將組件預覽和文檔寫在一起，并需要切換到不同的狀態，就比較吃力了
所以，storybook 就是為了解決這些問題而出現的，它為你的組件搭建了一個強大的開發環境，主要提供了以下的幾個功能：
提供了一個強大的 UI 組件管理頁面，可以很便捷、清晰的分組、管理多個組件或一個組件的多個不同狀態
在自動化交互測試之外，可以很方便的進行手動交互測試，并且可以動態改變組件參數，查看視圖變化
可以將組件預覽導出為靜態資源，這樣就可以很方便查看組件的文檔和不同參數對應的不同視圖
還有一系列的插件，提供了很多額外的功能，幫助你更好的開發、測試、優化組件
社區已經有很多組件庫都在使用 storybook 開發，比如：
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. 開發與命令 2.1 如何寫一個 story查看 storybook - Writing Stories，了解怎么寫 stories 與怎么用插件。
2.2 添加 storybook# 安裝全局命令 npm i -g @storybook/cli # 初始化已有項目（不會對原項目產生影響，只添加必要的配置與腳本而已） cd my-project-directory getstorybook # 運行 storybook npm run storybook
如果需要手動添加 storybook 或它的插件，可以查看：
Storybook for React
Storybook for Vue
Storybook for Angular
2.3 將組件預覽導出為靜態資源# 添加到 package.json 的 scripts
{
"export-storybook": "build-storybook -c .storybook -o .out"
}
# 運行命令
npm run export-storybook
3. 后續
更多博客，查看 https://github.com/senntyou/blogs
作者：深予之 (@senntyou)
版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97691.html
摘要：更多參考通過庫掌握函數組件有些時候，我們想要動態的加載一些組件按需加載，比如在一個單頁面應用中頁面的組件頁面的組件頁面的組件只有真正要實例化當前頁面的時候，才會去加載相應的組件。 react 前端項目技術選型、開發工具、周邊生態 聲明：這不是一篇介紹 React 基礎知識的文章，需要熟悉 React 相關知識 主架構：react, react-router, redux, redux...
摘要：更多參考通過庫掌握函數組件有些時候，我們想要動態的加載一些組件按需加載，比如在一個單頁面應用中頁面的組件頁面的組件頁面的組件只有真正要實例化當前頁面的時候，才會去加載相應的組件。 react 前端項目技術選型、開發工具、周邊生態 聲明：這不是一篇介紹 React 基礎知識的文章，需要熟悉 React 相關知識 主架構：react, react-router, redux, redux...
摘要：有目錄結構書寫方式組件集成項目構建等的約束，整個應用中是沒有文件的，所有的響應都是動態渲染的，包括里面的元信息路徑等。更多參考細說后端模板渲染客戶端渲染中間層服務器端渲染開發工具開發時主要會用到的工具。 vue 前端項目技術選型、開發工具、周邊生態 聲明：這不是一篇介紹 Vue 基礎知識的文章，需要熟悉 Vue 相關知識 主架構：vue, vue-router, vuex UI 框...
摘要：有目錄結構書寫方式組件集成項目構建等的約束，整個應用中是沒有文件的，所有的響應都是動態渲染的，包括里面的元信息路徑等。更多參考細說后端模板渲染客戶端渲染中間層服務器端渲染開發工具開發時主要會用到的工具。 vue 前端項目技術選型、開發工具、周邊生態 聲明：這不是一篇介紹 Vue 基礎知識的文章，需要熟悉 Vue 相關知識 主架構：vue, vue-router, vuex UI 框...
閱讀 1990·2021-09-07 10:24
閱讀 2092·2019-08-30 15:55
閱讀 2046·2019-08-30 15:43
閱讀 674·2019-08-29 15:25
閱讀 1061·2019-08-29 12:19
閱讀 1939·2019-08-23 18:32
閱讀 1522·2019-08-23 17:59
閱讀 952·2019-08-23 12:22
