引言
Vue框架在工作中通常用在业务系统上，其中的一些知识很少用到，比如声明式组件，递归型组件等。 所谓用进废退，需要给自己找个最佳的复习姿势，想来想去，选择了UI组件开发这样的方式。
本项目不会涉及到webpack相关知识，更多的关注在Vue的使用上。因此直接使用开源的UI库脚手架来二次开发。毕竟大佬们的脚手架要比自己搭的好太多。
目录结构
采用已有的开源脚手架，掘金文章链接地址为：juejin.cn/post/684490…
// 工程目录
├── src
| ├── locale
| | ├── lang
| | | ├── zh-CN.js // 语言文件-中文
│ ├── mixins // vue的混入功能
| | ├── emittier.js // vue组件通讯相关
| ├── packages // 存放组件的目录
│ ├── styles 公共样式目录
| | ├── common // 公共样式文件
| | | ├── animate.scss // 动画/过渡样式
| | | ├── var.scss // scss环境变量
| | ├── font // 字体图标(iconfont字体库下载即可)
| | ├── mixins // 样式混入
| | ├── index.scss // 样式文件整合
│ ├── utils 工具函数目录
| | ├── assist.js // 工具函数
│ └── index.js
├── docs // vuepress相关
以上是大致的一些目录结构，只介绍常用的几个目录
一个组件的创建流程大致是这样的(以Button为例)：
- 在
packages目录下创建button文件夹，文件夹内新建button.vue和index.js文件。 - 在
styles目录下新建button.scss，并在styles/index.scss中引入。 src/index.js中引入新创建的button，即可在vuepress中使用该button组件。
部分内置功能介绍
1. vue通讯-事件派发与事件广播
vue1.x版本内置了$dispatch和$broadcast方法，前者向上派发事件，后者向下广播事件。不过在vue2.x版本废弃了,我们可以自行实现这两个方法。
一个vue界面由多个组件构成，这些组件组成一棵组件树，通过组件实例信息，可以轻松找到它的父级，子级，甚至父级的父级，子级的子级等等。沿着这棵树，我们能找到任意一个组件，然后对其进行操作。
$dispatch沿着$parent向上找寻符合条件的组件(通常是用name作为条件)，然后执行操作。
$broadcast则是沿着$children向下查找符合条件的组件，然后执行操作。
// src/mixins/emitter.js
function broadcast(componentName, eventName, params) {
this.$children.forEach(child => {
const name = child.$options.name;
if (name === componentName) {
child.$emit.apply(child, [eventName].concat(params));
} else {
broadcast.apply(child, [componentName, eventName].concat([params]));
}
});
}
export default {
methods: {
dispatch(componentName, eventName, params) {
let parent = this.$parent || this.$root;
let name = parent.$options.name;
while (parent && (!name || name !== componentName)) {
parent = parent.$parent;
if (parent) {
name = parent.$options.name;
}
}
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
}
},
broadcast(componentName, eventName, params) {
broadcast.call(this, componentName, eventName, params);
}
}
};
2. scss变量
将一些公共的样式抽取成scss变量，比如主题色。这样在实现主题变换的时候只要修改scss变量即可。以下是目前可能用到的一些变量，之后需要时还会添加。
// styles/common/var.scss
// 主题颜色
$--color-primary: #00554a !default;
$--color-text: transparent !default;
$--color-info: #fff !default;
$--color-success: #67c23a !default;
$--color-warning: #e6a23c !default;
$--color-error: #f56c6c !default;
// 尺寸
$--size-large: 40px;
$--size-medium: 36px;
$--size-small: 32px;
$--size-mini: 28px;
// 字体尺寸
$--font-size-large: 16px;
$--font-size-medium: 14px;
$--font-size-small: 13px;
$--font-size-mini: 12px;
// 字体颜色
$--font-color-main: #5e6d82;
// 边框颜色
$--border-color: #dcdfe6;
// 禁用色
$--color-disabled: #c0c4cc;
// 滚动条的样式
@mixin scrollBar {
&::-webkit-scrollbar-track-piece {
background: #f8f8f8;
}
&::-webkit-scrollbar {
width: 6px;
height: 6px;
}
&::-webkit-scrollbar-thumb:hover {
background-color: #bbb;
}
&::-webkit-scrollbar-thumb {
background: #dddddd;
border-radius: 10px;
}
}
3. 字体图标
使用iconfont替代使用的图标文件，iconfont属于文本，因此对文本生效的css样式基本上都支持，比如设置颜色。
项目中采用的是iconfont网站提供的font class形式加载图标。具体流程是从iconfont上选择图标加入项目，然后下载到本地，直接替换掉styles/font目录下的文件。
// styles/index.scss
@import "./font/iconfont.css";
这样就能在组件上使用了，使用方式是<i class="iconfont icon-xxx" />
结语
已有Button、Radio、Checkbox、Input、InputNumber五个组件。目标是将所有常见的UI组件都写一遍。
这是我第一次分享文章，算是给自己开个大坑，希望不鸽..... 欢迎催更~~
demo地址： oversnail.github.io/over-snail-…
git地址： github.com/overSnail/o…
