axe-ui组件库贡献文档 #19
Description
技术栈
目录结构
.
├─ 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的版本升级到[email protected]以上：
npm install -g @vue/cli因为不更新版本直接install，会报vue-loader-v16相关的错。但是这个问题在[email protected]修复了。所以推荐更新的到最新版～
可以先使用vue --version命令来查看下版本，如果不是4.5+的请一定升级。
2-2、配置工具环境
git-cz用于代替“git commit”，启用commitizen来交互式地生成更符合规范的commit信息。
全局安装命令如下：
npm install -g git-cz3、安装/更新依赖：
npm install
# or
make install
# or
make install-cn # 用淘宝镜像安装host配置
因为服务启动后需要访问域名，故可以先进行配置：
#### axe-ui
127.0.0.1 dev.axe-ui.com
【重要】开始开发前
- 请先参观下issue 或 borad。
- 看下还没有被认领的组件是什么（也可以联系已经认领的人，看下他是否没时间做，是否愿意转让该组件的“开发权”）。
- 选中自己的组件后，提Issue说明认领哪个组件（可参考这个issue demo： [认领]Button组件 #6 )）。很重要很重要！！！
- 然后
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：修补bugdocs：文档（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