加薪攻略之UI组件库实践—storybook
加薪攻略之UI组件库实践—storybook
领导“拍了拍”你,是时候搭建你们团队的 UI 组件文档库了
一、业务背景
项目中抽离的组件较多的时候,没有集中展示出来具体有些什么,而是分布在各个使用的业务场景中。对于新接触项目的开发人员来说,由于不清楚业务场景,考虑复用组件时不是很直观,也不便于后期组件测试,维护和升级。
二、选用方案
目前业界最流行的StoryBook,使用StoryBook——更好地管理我们的UI组件
使用StoryBook的特点:
组件驱动开发,由下至上,从底层组件开始一步步构建界面
隔离开发环境展示组件,无需运行项目
无需关心组件的依赖和要求
隔离UI组件,支持独立调试&测试,统一展示项目组件库。
三、引入分析
由于原有项目技术栈为:vue+elementui+less, 可以参考Vue版的官方指南进行安装,经过一番实践,看了很多文章,也踩了很多坑,终于总结了以下步骤,可以更好的适配我们的项目和无侵入式引入storybook。
项目结构
项目效果
四、实现步骤
- install storybook 依赖
- 新建storybook配置文件./storybook/config.js,添加相关配置,加载组件的stories
- 为storybook的组件运行添加对应的webpack配置(./storybook/webpack.config.js)
- 为组件添加story(即xxx.stories.js)
- 运行storybook
1.添加依赖
npm install @storybook/vue --save-dev
npm install vue-loader@15.3.0 style-loader css-loader less-loader --save-dev
(注意vue-loader的版本在15以上,配合webpack4使用)
2.添加npm执行脚本
"scripts": {
...
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook -c .storybook -o .out"
},
3.添加配置文件
.storybook/config.js
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 相似的初始化工作:
//.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
<template>
<button :class="type" class="btn">
<slot></slot>
</button>
</template>
<script>
export default {
name: "HelloWorld",
props: {
type: {
type: String,
default: "default" // default/primary/danger
}
}
};
</script>
<style scoped lang="less">
.btn {
border: 1px solid transparent;
background: #fff;
outline: none;
color: #333;
padding: 5px 10px;
}
.default {
border: 1px solid #e3e3e3;
color: #333;
background-color: #fff;
}
</style>
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: '<v-button>Hello Button</v-button>',
}))
.add('with some emoji', () => ({
components: { vButton },
template: '<v-button>
加薪攻略之UI组件库实践—storybook的更多相关文章
- 为公司架构一套高质量的 Vue UI 组件库
有没有曾遇过,产品要我们实现一个功能,但是 iview 或者 elementui 不支持,我们然后义正言辞的说,不好意思,组件库不支持,没法做到. 有没有曾和设计师争论得面红耳赤,其实也是因为组件库暂 ...
- 前端笔记之Vue(四)UI组件库&Vuex&虚拟服务器初识
一.日历组件 new Date()的月份是从0开始的. 下面表达式是:2018年6月1日 new Date(2018, 5, 1); 下面表达式是:2018年5月1日 new Date(2018, 4 ...
- react_app 项目开发 (4)_ React UI 组件库 ant-design 的基本使用
最流行的开源 React UI 组件库 material-ui 国外流行(安卓手机的界面效果)文档 ant-design 国内流行 (蚂蚁金服 设计,一套 PC.一套移动端的____下拉菜单.分页.. ...
- 16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...
- vue移动端金融UI组件库滴滴MandMobile面向金融场景设计附功能思维导图
vue移动端金融UI组件库滴滴MandMobile面向金融场景设计附功能思维导图 Mand Mobile是面向金融场景设计的移动端组件库,基于Vue.js实现.目前已实际应用于滴滴四大金融业务板块的1 ...
- [转载]前端——实用UI组件库
https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...
- [转]VUE优秀UI组件库合集
原文链接 随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react.v ...
- 【转】前端——实用UI组件库
Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...
- 前端——实用UI组件库
Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...
随机推荐
- 第14.4节 使用IE浏览器获取网站访问的http信息
上节<第14.3节 使用google浏览器获取网站访问的http信息>中介绍了使用Google浏览器怎么获取网站访问的http相关报文信息,本节介绍IE浏览器中怎么获取相关信息.以上节为基 ...
- Linux使用inode(i节点号)删除文件
今天学习Linux的时候遇到的知识点,想起了以前一次线下AWD攻防赛的时候的不死马,记录一下 在Linux里面,有的时候我们会遇到奇奇怪怪的文件名,以至于我们删除不了,比如说我们创建了一个叫做&quo ...
- 自学linux——22.粘滞位的了解及使用
粘滞位的了解及使用 一.权限 1.文件的权限 r (read) :可读取该文件的实际内容w(write):可以编辑,新增或者修改该文件的内容(但不含删除该文件)x(execute):代表该文件可以被系 ...
- 【杂记】CSP-S 2020 游记 &反思
考场经历 吐槽:为什么这个 Enter 的位置怎么诡异啊老是打错.要是考挂了就怪你 开场当然先看了 T1,发现是个日期转换,果然是个百出不厌的模拟题类型,估价细节多到爆炸.看了几分钟题目,对这些规则云 ...
- tcp/ip原理/三次握手/四次挥手
@ tcp/ip原理 1.1 tcp/ip三次握手 1.1.1 建立过程说明 a) 由主机A发送建立TCP连接的请求报文, 其中报文中包含seq序列号, 是由发送端随机生成的, 并且还将报文中SY ...
- 2020高考倒计时!全屏向下滑动设计HTML源码
全屏竖向滑动效果,自适应,多终端 全国高考倒计时,音乐自动播放. 背景图片:img目录下替换bg.jpg 背景音乐:audio目录下替换song.mp3 原本按照正常情况下每年的6月7.8日就是全国 ...
- JavaSE12-内部类&API
1. 参数传递 1.1 类名作为形参和返回值 1.类名作为方法的形参 方法的形参是类名,其实需要的是该类的对象 实际传递的是该对象的[地址值] 2.类名作为方法的返回值 方法的返回值是类名,其实返回的 ...
- 带宽、延时、吞吐率、PPS 这些都是啥?
Linux 网络协议栈是根据 TCP/IP 模型来实现的,TCP/IP 模型由应用层.传输层.网络层和网络接口层,共四层组成,每一层都有各自的职责. 应用程序要发送数据包时,通常是通过 socket ...
- Greenplum 性能优化之路 --(三)ANALYZE
一.为什么需要 ANALYZE 首先介绍下 RBO 和 CBO,这是数据库引擎在执行 SQL 语句时的2种不同的优化策略. RBO(Rule-Based Optimizer) 基于规则的优化器,就是优 ...
- JUC(二):CAS及ABA
CAS是什么? 比较并交换. CAS示例 package com.chinda.java.audition; import java.util.concurrent.atomic.AtomicInte ...