axe-ui组件库贡献文档

[xingorg1]

基于vue-next的一套PC端前端UI组件库

技术栈

• Vue3.0
• TypeScript
• Dart Scss
• Mocha + chai
• Eslint

目录结构

.
├─ README.md
├─ package.json
├─ docs # 组件使用文档
│  └─ button.md
├─ packages # 组件源码
│  ├─ button # 单组件
│  │  ├─ src
│  │  │  └─ button.vue
│  │  └─ axe.umd.js
│  └─ axe.umd.js # 全部组件入口
├─ public
│  ├─ img
│  │  └─ icons # 存放pwa 图标
│  ├─ favicon.ico
│  ├─ index.html
│  └─ robots.txt
├─ src # demo样式
│  ├─ components # 存放单元组件使用Demo
│  ├─ App.vue
│  └─ main.ts
├─ styles # 组件样式
│  ├─ common
│  │  ├─ _var.scss # 全局scss变量
│  │  └─ xxx.scss
│  ├─ mixin # 混合
│  │  └─ xxx.scss
│  └─ button.scss # 组件单样式
└─ tests
   └─ utils # 单元测试
      └─ xx.spec.ts # xx模块测试文件

依赖安装

1、环境和工具要求

• node： 8.9+ (推荐 10+)
• npm： 6+
• MinGW：最新即可，安装教程参照MinGW的安装与make命令的使用
• git-cz: 最新版

Vue CLI requires Node.js version 8.9 or above (v10+ recommended). You can manage multiple versions of Node on the same machine with n, nvm or nvm-windows.

2-1、升级cli【必要！】

本项目是使用vue-cli搭建项目框架，需要用vue3，得先把vue-cli的版本升级到vue-cli@4.5以上：

npm install -g @vue/cli

因为不更新版本直接install，会报vue-loader-v16相关的错。但是这个问题在vue-cli@4.5.1修复了。所以推荐更新的到最新版～

可以先使用vue --version命令来查看下版本，如果不是4.5+的请一定升级。

2-2、配置工具环境

git-cz用于代替“git commit”，启用commitizen来交互式地生成更符合规范的commit信息。

全局安装命令如下：

npm install -g git-cz

3、安装/更新依赖：

npm install
# or
make install
# or
make install-cn # 用淘宝镜像安装

host配置

因为服务启动后需要访问域名，故可以先进行配置：

#### axe-ui
127.0.0.1 dev.axe-ui.com

【重要】开始开发前

1. 请先参观下issue 或 borad。
2. 看下还没有被认领的组件是什么（也可以联系已经认领的人，看下他是否没时间做，是否愿意转让该组件的“开发权”）。
3. 选中自己的组件后，提Issue说明认领哪个组件（可参考这个issue demo： [认领]Button组件 #6 )）。很重要很重要！！！
4. 然后fork代码开始开发。（防止和别人重复开发）

开始开发

自动化创建新组件

make new <component-name> [组件中文名]

component-name：组件名，中横线命名法。如：button、button-group
组件中文名：可选，建议有。

# demo：
make new radio 单选框

make new radio-group 单选框组

强烈推荐使用make命令开发！关于make命令的使用见这里MinGW的安装与make命令的使用

启动文档平台

整个axe-ui平台启动，适用源码开发、文档编写。

npm run serve
# or
npm run dev
# or
make dev

浏览地址

启动成功后在浏览器中打开 http://dev.axe-ui.com:8080/ 导航至相应组件即可进行开发。

源码地址：packages/

开发中规范与注意事项

开发中请注意这些问题和遵守这些代码规范

开发完成后

• 如果是修复 bug，请确保该组件的其他功能没有受到本修复的影响。
• 如果是新增功能，请在文档中补充该功能的 API 说明，并在 TypeScript 定义中添加该 API。视功能的复杂程度，有时还需要添加测试用例和文档例子。

单元测试

在提交代码前，建议首先在本地运行一遍测试。
使用下列命令，即可进行测试，并且在你改变代码后会再次触发测试。

npm run test:ui
# or
make test

代码校验和修复

npm run lint

提交代码

强烈推荐使用命令commit提交符合规范的信息，不再推荐使用git commit。

npm run commit
# or
make commit

交互式生成信息demo

若非要使用git commit，请在 commit 代码时，commit message 请遵循以下格式：

<Commit 类型>: <commit 描述>

commit 类型只允许以下7种个标识：

• feat：新功能（feature）
• fix：修补bug
• docs：文档（documentation）
• style： 格式（不影响代码运行的变动）
• refactor：重构（即不是新增功能，也不是修改bug的代码变动）
• test：增加测试
• chore：构建过程或辅助工具的变动

如果type为feat和fix，则该 commit 将肯定出现在 Change log 之中。

生产环境（打包+压缩）

生成dist文件

npm run dist
# or
make dist

发包

请先去NPM注册一个自己的账号：https://www.npmjs.com/
或使用下边命令注册

npm adduser

然后在项目根目录命令行执行一键发布命令：

npm run pub
# or
make pub

[xingorg1]

【重要】开始开发前

1. 请先参观下issue 或 borad。
2. 看下还没有被认领的组件是什么（也可以联系已经认领的人，看下他是否没时间做，是否愿意转让该组件的“开发权”）。
3. 选中自己的组件后，提Issue说明认领哪个组件（可参考这个[issue demo](https://github.1. com/[认领]Button组件 #6)）。很重要很重要！！！
4. 然后fork代码开始开发。（防止和别人重复开发）

[xingorg1]

加入知识组

邀请加入：https://www.yuque.com/docs/share/03c22f3e-e1d0-4b8f-8f73-33921c61e8a9
知识组首页：https://www.yuque.com/axe-ui

参与贡献可加研发交流群、二维码失效请移步公众号「前端印记」回复关键字【axe】即可。