@xysfe/actui
Version:
A fantastic mobile ui lib implement by Vue
64 lines (60 loc) • 2.54 kB
Markdown
# @xysfe/actui
一套基于Vue实现的组件库
[](https://npmjs.org/package/@xysfe/actui)
## 介绍
#### 组件名
```
在package.json中有个prefix字段，为必填字段。
如果指定为act,在应用中以<act-toast></act-toast>方式引用组件
```
#### 添加新组件
```
执行npm run add xxx
则会在src/components/下新建组件相应目录及文件，
并把组件名存入components.json文件中，以便重名的检查。
```
#### 开发及发布
```javascript
npm run docs
npm run dist
```
## 注意事项
#### 开发篇
1.样式默认用scss开发。
2.在src/style目录下有个index.scss文件，存放所有组件的公共样式。
3.公共样式的引用。
```
组件开发：
组件在开发过程中，如果对公共样式有依赖，不需要手动import公共样式，直接使用即可。
使用组件：
如果某个组件Toast依赖公共样式，则在按需引入时，需手动import Style模块，如下所示：
import { Style, Toast } from '@xysfe/actui'
否则不用引入Style模块:
import { Toast } from '@xysfe/actui'
```
4.组件发射事件的命名。
一个组件需要对外抛出事件时，事件的命名全部小写：
```
//good
this.$emit("hidelayer")
//bad
this.$emit("hide-layer")
this.$emit("hideLayer")
```
#### 文档篇
1.文档有阅读文档和可操作example两类。阅读文档放在docs/md目录下,格式为md;可操作文档放在docs/example目录下,格式为vue。
2.阅读文档编写好之后，需手动添加路由（在docs/route/route_md.js中添加），然后把配置好的路由添加到文档菜单中（docs/components/menu.vue），重新生成文档即可访问。
3.可操作文档编写好之后，需手动添加路由（在docs/route/route_example.js中添加）,然后文档最右侧的demo区域可体验每个组件。
4.运行npm run docs生成文档，文档打包在dist目录下。
#### 组件开发流程
1.基于master新建功能分支
2.添加新组建，执行npm run add xxx
3.增加组件文档，新建docs/md，docs/example文件，配置文档相关路由
4.在docs/example/文件中调试组件
5.组件开发、调试完毕后，执行npm run dist确认是否能正常编译
6.修改package.json中的版本号，功能分支合并到master，在master执行npm run dist
7.组件库的gitlab及npm发布(npm publish --access public)
### Todo
1.支持主题
2.单元测试
3.持续迭代