加薪攻略之UI元件庫實踐—storybook
阿新 • • 發佈：2021-01-07
[TOC]
# 加薪攻略之UI元件庫實踐—storybook
> 領導“拍了拍”你，是時候搭建你們團隊的 UI 元件文件庫了
## 一、業務背景
專案中抽離的元件較多的時候，沒有集中展示出來具體有些什麼，而是分佈在各個使用的業務場景中。對於新接觸專案的開發人員來說，由於不清楚業務場景，考慮複用元件時不是很直觀，也不便於後期元件測試，維護和升級。
## 二、選用方案
目前業界最流行的StoryBook，使用StoryBook——更好地管理我們的UI元件
使用StoryBook的特點:
元件驅動開發，由下至上，從底層元件開始一步步構建介面
隔離開發環境展示元件，無需執行專案
無需關心元件的依賴和要求
隔離UI元件，支援獨立除錯&測試，統一展示專案元件庫。
[使用效果](https://next--storybookjs.netlify.app/vue-kitchen-sink/?path=/story/button--square)
[Storybook官網](https://storybook.js.org/)
## 三、引入分析
由於原有專案技術棧為：vue+elementui+less， 可以參考Vue版的官方指南進行安裝，經過一番實踐，看了很多文章，也踩了很多坑，終於總結了以下步驟，可以更好的適配我們的專案和無侵入式引入storybook。
### 專案結構
### 專案效果
## 四、實現步驟
- install storybook 依賴
- 新建storybook配置檔案./storybook/config.js，新增相關配置，載入元件的stories
- 為storybook的元件執行新增對應的webpack配置（./storybook/webpack.config.js）
- 為元件新增story(即xxx.stories.js)
- 執行storybook
### 1.新增依賴
```javascript
npm install @storybook/vue --save-dev
npm install [email protected] style-loader css-loader less-loader --save-dev
```
（注意vue-loader的版本在15以上，配合webpack4使用）
### 2.新增npm執行指令碼
```javascript
"scripts": {
...
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook -c .storybook -o .out"
},
```
### 3.新增配置檔案
.storybook/config.js
```javascript
import { addParameters,configure } from '@storybook/vue';
function loadStories() {
/*根據特定的檔名載入stories，在這個例子，用xxx.stories.js命名檔案*/
const req = require.context('./stories', true, /\.stories\.js$/);
req.keys().forEach(filename => req(filename));
}
addParameters({
options: {
panelPosition: 'right' //操作面板在右邊
},
})
configure(loadStories, module);
```
根據專案情況，同樣在以上檔案中，做一些和專案中 main.js 相似的初始化工作：
```javascript
//.storybook/config.js
import Vue from "vue";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from "axios";
import '@/utils/prototype';
Vue.config.productionTip = false;
Vue.prototype.$http = axios;
Vue.use(ElementUI, { size: 'mini'});
...
```
### 4.新增必要的webpack配置
建立檔案 .storybook/webpack.config.js
```
// .storybook/webpack.config.js
const path = require('path');
module.exports = async ({ config, mode }) => {
function resolve(dir) {
return path.join(__dirname, "..", dir);
}
//設定別名同項目保持一致
config.resolve = {
extensions: [".js", ".vue", ".json", ".jsx"],
alias: {
vue$: "vue/dist/vue.esm.js",
"@": resolve("src"),
"@assets": resolve("src/assets")
}
};
config.module.rules.push({
test: /\.(css|less)$/,
use: ["style-loader", "css-loader","less-loader"],
exclude:/node_modules/
});
return config;
};
```
### 5.準備專案中的元件
src/components/Button/index.vue
```
```
### 6.為元件新增story
建立 .storybook/stories/button.stories.js
```
import { storiesOf } from '@storybook/vue';
import vButton from '../../src/components/Button/index.vue';
storiesOf('Button', module)
.add('with text', () => ({
components: { vButton },
template: 'Hello Button ',
}))
.add('with some emoji', () =>