# ui-template-muc
一套基于vue快速搭建UI库的脚手架
配合babel-plugin-import-muc实现组件的按需加载,具体使用方式参考文档
[](https://npmjs.org/package/ui-template-muc)
----
## 介绍
#### 组件名
```
在package.json中有个prefix字段，为必填字段。
如果指定为act,则在应用中使用方式引用组件
```
#### 添加新组件
```
执行npm run add xxx
则会在src/components目录下新建相应目录及文件
```
#### 添加新入口
```
npm run entry
新建的组件，不会对外暴露
当开发完成时，执行上述命令，会自动生成新的入口文件 （src/index.js），并包含新的组件
```
#### 开发及发布
```javascript
npm run dev
npm run dist
```
## 注意事项
#### 开发篇
1.样式默认都用scss开发。
2.公共样式的开发。
在src/style目录下有个index.scss文件，存放所有组件的公共样式
在组件开发时，可以手动引用该样式
但当组件测试完毕准备上线时，需把对公共样式的引用删除，否则公共样式会被打包进组件私有样式文件里
3.公共样式的引用。
```
如果某个组件toast依赖公共样式，则在按需引入中需手动import Style模块，如下所示：
import { Style, toast } from 'actui'
否则不用引入Style模块:
import { toast } from 'actui'
```
4.组件的props属性名称。
在定义props属性时，名字要用一层驼峰定义，比如：定义一个按钮的颜色属性：
```
export default{
props:{
//good
confirmColor:{
type:String,
default:''
}
//bad
confirmBtnColor:{
type:String,
default:''
}
}
}
```
5.组件发射事件的命名。
一个组件需要对外抛出事件时，事件的命名全部小写：
```
//good
this.$emit("hidelayer")
//bad
this.$emit("hide-layer")
this.$emit("hideLayer")
```
#### 文档篇
1.运行npm run docs生成文档，文档打包在dist目录下。
2.文档的格式都是md的文件，存在放docs/md/目录下，具体格式请参考docs/md/demo.md文件。
3.文档编写好之后，需手动添加路由（在docs/route.js中添加），然后把配置好的路由添加到文档菜单中（docs/components/menu.vue），重新生成文档即可访问。
4.在md文件测试组件功能时，传给组件的属性名需用连接符的写法。
```
picker.md文件
//good
//bad
```
#### 组件开发流程
1.添加新组建，执行npm run add xxx
2.增加组件文档，新建md文件，配置文档相关路由。
3.在md文件中调试组件。
4.组件开发，调试完毕，执行npm run dist,并修改package.json中的版本号。
5.组件库的gitlab及npm发布。
### todo
```
1.支持主题
2.单元测试
3.持续迭代
```