ui-template-muc/README.md

A fantastic mobile ui lib implement by Vue

# ui-template-muc

一套基于vue快速搭建UI库的脚手架
配合babel-plugin-import-muc实现组件的按需加载,具体使用方式参考文档

[![NPM version](https://img.shields.io/npm/v/ui-template-muc.svg?style=flat)](https://npmjs.org/package/ui-template-muc)

----



## 介绍
#### 组件名
```
在package.json中有个prefix字段，为必填字段。
如果指定为act,则在应用中使用<act-toast></act-toast>方式引用组件
```


#### 添加新组件

```
执行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
<act-picker :confirm-txt="value" ref="picker" :confirm-color="color"></act-picker>
//bad
<act-picker :confirmTxt="value"  :confirmColor="color" :data="column2"></act-picker>

```
#### 组件开发流程
1.添加新组建，执行npm run add xxx
2.增加组件文档，新建md文件，配置文档相关路由。
3.在md文件中调试组件。
4.组件开发，调试完毕，执行npm run dist,并修改package.json中的版本号。
5.组件库的gitlab及npm发布。
### todo

```
1.支持主题
2.单元测试
3.持续迭代
```