从零搭建Vue组件库
一.组件库的划分
我们的划分以elementUi为基准分为
Basic:Button、Icon图标、Layout布局、container布局容器...Form:Input、Radio、checkbox、DatePicker、Upload...Data:Table、Tree、Pagination...Notice:Alert、Loading、Message...Navigation:Tabs、Dropdown、NavMenu...Others:Popover,Dialog、inifiniteScroll、Carousel...
二.通过Vue-Cli初始化项目
vue create zh-ui
1
? Check the features needed for your project:
(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
(*) CSS Pre-processors
( ) Linter / Formatter
(*) Unit Testing
( ) E2E Testing
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
2.x
> 3.x (Preview)
1
2
2
> Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
1
2
3
4
2
3
4
为什么选择dart-sass?
? Pick a unit testing solution:
> Mocha + Chai # ui测试需要使用karma
Jest
1
2
3
2
3
三.目录结构配置
│ .browserslistrc # 兼容版本
│ .gitignore
│ babel.config.js # babel的配置文件
│ package-lock.json
│ package.json
│ README.md
| examples # 组件使用案例
├─public
│ favicon.ico
│ index.html
├─src
│ │ App.vue
│ │ main.js
│ │
│ ├─packages # 需要打包的组件
│ │ button
| | button-group
│ │ icon
│ │ index.js # 所有组件的入口
│ │
│ └─styles # 公共样式
│ common
| mixins
└─tests # 单元测试
└─unit
button.spec.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
四.编写插件入口
import Icon from './icon';
import Button from './button'
import ButtonGroup from './button-group'
const plugins = [
Icon,
Button,
ButtonGroup
];
const install = (app: any) => {
plugins.forEach(plugin => app.use(plugin));
}
export default {
install
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
import { createApp } from 'vue'
import App from './App.vue'
import ZfUI from './packages/index';
createApp(App).use(ZfUI).mount('#app')
1
2
3
4
5
2
3
4
5
我们可以通过插件的方式去引入我们的组件库
五.编写Button组件
实现功能规划
- [ ] 按钮的基本用法
- [ ] 图标按钮
- [ ] 按钮加载中状态
- [ ] 按钮组的实现
准备备用样式
├─common
│ |-- var.scss # 基本样式
└─mixins
│ |-- mixins.scss # 混合的方法
│ button.scss
| button-group.scss
| icon.scss
1
2
3
4
5
6
7
2
3
4
5
6
7
// 样式变量
$primary: #409EFF;
$success: #67C23A;
$warning: #E6A23C;
$danger: #F56C6C;
$info: #909399;
$primary-active: #3a8ee6;
$success-active: #5daf34;
$warning-active: #cf9236;
$danger-active: #dd6161;
$info-active: #82848a;
$font-size:12px;
$border-radius:4px;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
(1).按钮的实现
<template>
<button :class="classs" :disabled="loading">
<zf-icon :icon="icon" v-if="icon && !loading" class="icon"></zf-icon>
<zf-icon icon="loading" v-if="loading" class="icon loading"></zf-icon>
<span v-if="$slots.default">
<slot></slot>
</span>
</button>
</template>
<script>
import { computed } from "vue";
export default {
props: {
type: {
type: String,
default: "primary",
validator(type) {
if (
type &&
!["warning", "success", "danger", "info", "primary"].includes(type)
) {
console.log(
"组件的type类型必须为:" +
["warning", "success", "danger", "info", "primary"].join("、")
);
}
return true;
},
},
icon: String,
loading:{
type:Boolean,
default:false
},
position:{
type:String,
default:'left'
}
},
name: "ZfButton",
setup(props, context) {
// 计算出所有样式
const classs = computed(() => [
`zf-button`,
`zf-button-${props.type}`,
`zf-button-${props.position}`
]);
return {
classs,
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
使用
iconfont添加图标
(2)创建图标组件
<template>
<svg class="zf-icon" aria-hidden="true">
<use :xlink:href="`#icon-${icon}`" />
</svg>
</template>
<script>
import "./font";
export default {
props: {
icon: String,
},
name: "ZfIcon",
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
@import "./common/var.scss";
@import "./mixins/mixins.scss";
@include blockquote(icon) {
width: 24px;
height: 24px;
vertical-align: middle;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
(4).按钮组的实现
以按钮组的方式出现，常用于多项类似操作。
<template>
<div class="zf-button-group">
<slot></slot>
</div>
</template>
<script>
import { onMounted, getCurrentInstance } from "vue";
export default {
name: "ZfButtonGroup",
setup(props) {
onMounted(() => {
let context = getCurrentInstance();
let ele = context.ctx.$el;
let children = ele.children;
for (let i = 0; i < children.length; i++) {
console.assert(children[i].tagName === "BUTTON", "必须子节点是button");
}
});
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@import "./common/var.scss"; // 公共样式
@import "./mixins/mixins.scss";
@include blockquote(button-group) {
display: inline-flex;
vertical-align: middle;
button {
border-radius: 0;
position: relative;
box-shadow: none;
&:not(first-child) {
margin-left: -1px;
}
&:first-child {
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
&:last-child {
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
}
button:hover {
z-index: 1;
}
button:focus {
z-index: 2;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
六.搭建测试环境
我们需要测试ui渲染后的结果。需要在浏览器中测试,所有需要使用Karma
Karma配置
(1)安装karma
npm install --save-dev karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack mocha karma-chai
1
(2)配置karma文件
karma.conf.js
var webpackConfig = require('@vue/cli-service/webpack.config')
module.exports = function(config) {
config.set({
frameworks: ['mocha'],
files: ['tests/**/*.spec.js'],
preprocessors: {
'**/*.spec.js': ['webpack', 'sourcemap']
},
autoWatch: true,
webpack: webpackConfig,
reporters: ['spec'],
browsers: ['ChromeHeadless']
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"scripts": {
"test": "karma start"
}
}
1
2
3
4
5
2
3
4
5
单元测试
import { expect } from 'chai'
import Button from '@/packages/button';
import Icon from '@/packages/icon';
// @ts-ignore
import { createApp } from 'vue/dist/vue.esm-bundler.js';
describe('HelloWorld.vue', () => {
it('测试插槽显示是否正常', () => {
const container = document.createElement('div');
const app = createApp({
template: `<zfButton>hello</zfButton>`,
components: {
"zfButton": Button,
}
}, {
icon: 'edit',
}).mount(container);
let html = app.$el.innerHTML
expect(html).to.match(/hello/)
});
it('测试icon是否能够正常显示', () => {
const container = document.createElement('div');
const app = createApp({
...Button,
}, {
icon: 'edit',
}).use(Icon).mount(container);
let useEle = app.$el.querySelector('use');
let href = useEle.getAttribute('xlink:href');
expect(href).to.eq('#icon-edit');
});
it('测试传入loading时 按钮为禁用态', () => {
const container = document.createElement('div');
const app = createApp({
template: `<zfButton></zfButton>`,
components: {
"zfButton": Button,
}
}, {
loading: true,
}).use(Icon).mount(container);
let useEle = app.$el.querySelector('use');
let href = useEle.getAttribute('xlink:href');
let disabeld = app.$el.getAttribute('disabled')
expect(href).to.eq('#icon-loading');
expect(disabeld).not.to.eq(null);
});
// todo....
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
七.打包组件
(1)配置打包命令
"build": "vue-cli-service build --target lib --name zf ./src/packages/index.ts --no-clean && vue-cli-service build --all --no-clean",
1
const args = process.argv.slice(2);
if (process.env.NODE_ENV == 'production' && args.includes('--all')) {
const fs = require('fs');
const path = require('path');
const getEntries = (dir) => {
let absPath = path.resolve(dir);
let files = fs.readdirSync(absPath);
let entries = {}
files.forEach(item => {
let p = path.resolve(absPath, item);
if (fs.statSync(p).isDirectory()) {
p = path.resolve(p, 'index.ts')
entries[item.split('.')[0]] = p
}
});
return entries;
}
module.exports = {
outputDir: 'dist', // 打包出口
configureWebpack: {
entry: { // 配置多入口
...getEntries('./src/packages')
},
output: {
filename: `lib/[name]/index.js`,
libraryTarget: 'umd',
libraryExport: 'default',
library: ['zf', '[name]']
},
externals:{
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
},
css: {
sourceMap: true,
extract: {
filename: 'css/[name]/style.css'
}
},
chainWebpack: config => {
config.optimization.delete('splitChunks')
config.plugins.delete('copy')
config.plugins.delete('preload')
config.plugins.delete('prefetch')
config.plugins.delete('html')
config.plugins.delete('hmr')
config.entryPoints.delete('app')
},
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
(2)配置运行入口
"main": "./dist/zf.umd.min.js"
1
(3)link到全局下
npm link
1
八.使用VitePress搭建文档
VuePress基本配置:
(1).安装
npm install vitepress -D
1
(2).配置scripts
{
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs"
}
1
2
3
4
2
3
4
(3).初始化docs
增加入口页面index.md
(4).配置导航
增加config.js
module.exports = {
title: 'zf-ui', // 设置网站标题
description: 'ui 库', //描述
dest: './build', // 设置输出目录
themeConfig: { //主题配置
nav: [
{ text: '主页', link: '/' },
{ text: '联系我', link: '/contact/' },
{ text: '我的博客', link: 'https://' },
],
// 为以下路由添加侧边栏
sidebar: [
{
text: 'Button 按钮', // 必要的
link: '/button/', // 可选的, 标题的跳转链接，应为绝对路径且必须存在
collapsable: false, // 可选的, 默认值是 true,
sidebarDepth: 1, // 可选的, 默认值是 1
},
{
text: 'Icon 图标', // 必要的
link: '/icon/', // 可选的, 标题的跳转链接，应为绝对路径且必须存在
collapsable: false, // 可选的, 默认值是 true,
sidebarDepth: 1, // 可选的, 默认值是 1
},
]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
九.发布到npm
配置.npmignore配置文件
npm addUser
npm publish
1
2
2
十.推送到git
添加npm图标 https://badge.fury.io/for/js
git remote add origin
git push origin master
1
2
2