ui-template-muc

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

介绍

组件名

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

添加新组件

执行npm run add xxx
则会在src/components目录下新建相应目录及文件

添加新入口

npm run entry
新建的组件，不会对外暴露
当开发完成时，执行上述命令，会自动生成新的入口文件 （src/index.js），并包含新的组件

开发及发布

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.持续迭代