Skip to content

Commit

Permalink
Merge pull request #35 from DFE-evernote/dev
Browse files Browse the repository at this point in the history
Chore: update configurations
  • Loading branch information
xingorg1 committed Nov 26, 2020
2 parents 652d8db + 40cbb27 commit f4e2471
Show file tree
Hide file tree
Showing 23 changed files with 358 additions and 17,003 deletions.
1 change: 1 addition & 0 deletions .gitignore
@@ -1,5 +1,6 @@
.DS_Store
node_modules
package-lock.json
/dist


Expand Down
37 changes: 37 additions & 0 deletions Makefile
@@ -0,0 +1,37 @@
.PHONY: dist test
default: help

install:
npm install

install-cn:
npm install --registry=http://registry.npm.taobao.org

new:
node build/bin/new.js $(filter-out $@,$(MAKECMDGOALS))
node build/bin/build-entry.js

dev:
npm run dev

dist:
npm run dist

pub:
npm run pub

# deploy:
# # npm run deploy

test:
npm run test:ui

help:
@echo " \033[35m make\033[0m \033[1m命令使用说明:\033[0m"
@echo " \033[35m make install\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- 安装依赖"
@echo " \033[35m make install-cn\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- 安装依赖"
@echo " \033[35m make new <component-name> [组件中文名]\033[0m\t--- 创建新组件(组件英文名用中横线)例如 'make new button-group 按钮'"
@echo " \033[35m make dev\033[0m\t\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- 启动开发"
@echo " \033[35m make test\033[0m\t\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- 运行测试"
@echo " \033[35m make dist\033[0m\t\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- 编译项目,构建目标文件"
@echo " \033[35m make pub\033[0m\t\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- 发布到 npm 上"
150 changes: 45 additions & 105 deletions README.md
Expand Up @@ -37,122 +37,62 @@
基于vue-next的一套PC端前端UI组件库
</div>

## 技术栈
* [Vue3.0](https://cn.vuejs.org/)
* [TypeScript](https://www.tslang.cn/)
* [Dart Scss](https://sass-lang.com/)
* [Mocha](https://mochajs.org/) + [chai](https://www.chaijs.com/)
* [Eslint](https://eslint.bootcss.com/)

## 目录结构
```bash
.
├─ 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、环境要求
- `no`de``: 8.9+ (推荐 10+)
- `npm`: 6+

> Vue CLI requires [Node.js](https://nodejs.org/en/) version 8.9 or above (v10+ recommended). You can manage multiple versions of Node on the same machine with [n](https://github.com/tj/n), [nvm](https://github.com/nvm-sh/nvm) or [nvm-windows](https://github.com/coreybutler/nvm-windows).
## 常用链接
- [FQA]()

### 2、升级cli
本项目是使用vue-cli搭建项目框架,需要用vue3,得先把vue-cli的版本升级到`vue-cli@4.5`以上:
```
npm install -g @vue/cli
## 安装
```sh
npm install axe-ui -S
```
> 因为不更新版本直接install,会报[vue-loader-v16](https://github.com/vuejs/vue-cli/pull/5718#issuecomment-673360542)相关的错。但是这个问题在[vue-cli@4.5.1修复](https://github.com/vuejs/vue-cli/blob/dev/CHANGELOG.md#bug-bug-fix-7)了。所以推荐更新的到最新版~
### 快速使用
全局引入:
```sh
import { createApp } from 'vue'
import App from './App.vue'
import Axe from 'axe-ui'
import 'axe-ui/axe.css'

### 3、安装依赖:
createApp(App).use(AxeUI).mount('#app')
```
npm install
本组件支持按需导入。你也可以像下边这样,单独导入需要的组件:
```sh
import { createApp } from 'vue'
import App from './App.vue'
import {
Input,
Button
// ...其他组件
} from 'axe-ui'
import 'axe-ui/css/input/style.css'
import 'axe-ui/css/button/style.css'
let app = createApp(App)
app.component(Input.name, Input)
app.component(Button.name, Button)
app.mount('#app')
```
## host配置
因为服务启动后需要访问域名,故可以先进行配置:
## 浏览器支持
- 现代浏览器
- IE 11+
```
#### axe-ui
127.0.0.1 dev.axe-ui.com
```
## 开始开发
### 启动文档平台
整个axe-ui平台启动,适用源码开发、文档编写。
```
npm run serve
# or
npm run dev
```
## 开发文档
- [中文文档]()
### 浏览地址
启动成功后在浏览器中打开 http://dev.axe-ui.com:8080/ 导航至相应组件即可进行开发。
## 更新日志
[release notes](https://github.com/DFE-evernote/axe-ui/releases)
源码地址:`packages/`
## 参与贡献
在拉取代码前请先查看我们的[贡献文档](https://github.com/DFE-evernote/axe-ui/issues/19)
## 开发完成后
• 如果是修复 bug,请确保该组件的其他功能没有受到本修复的影响。
• 如果是新增功能,请在文档中补充该功能的 API 说明,并在 TypeScript 定义中添加该 API。视功能的复杂程度,有时还需要添加测试用例和文档例子。
## 特别感谢
下面的贡献者让组件库变得更好,感谢[所有为Axe做出贡献的人](https://github.com/DFE-evernote/axe-ui/graphs/contributors)!
## 单元测试
在提交代码前,建议首先在本地运行一遍测试。
使用下列命令,即可进行测试,并且在你改变代码后会再次触发测试。
```
npm run test:unit
```
以贡献时间为序,感谢:
## 代码校验和修复
```
npm run lint
```
## 提交代码
在 commit 代码时,commit message 请遵循以下格式:
```
<Commit 类型>: <commit 描述>
```
**commit 类型可以是:**
`Tree`:如果本次 commit 修复了某个组件的 bug,或为某个组件添加了 feature,则 commit 类型为该组件的名称
`Docs`:本次 commit 与文档相关,如优化了文档某处语言描述、新增了一个例子
`Chore`:本次 commit 与构建、CI 相关,如修改了 webpack 配置、修改了发布脚本
`Utils`:本次 commit 修改了 src/utils 中的某些内容
`Test`:本次 commit 修改了 test 中的某些内容
`Changelog`:一般仅在发布新版本前出现,表示新增了本次发布的更新说明
-[Otto](https://github.com/Otto-J)
## 生产环境(打包+压缩)
生成dist文件

```
npm run build
```

## 自定义配置
See [Configuration Reference](https://cli.vuejs.org/config/).
## 加入我们
[《加入axe-ui》](https://www.yuque.com/docs/share/03c22f3e-e1d0-4b8f-8f73-33921c61e8a9)
## LICENSE
[MIT](https://github.com/DFE-evernote/axe-ui/blob/main/LICENSE)
63 changes: 63 additions & 0 deletions build/bin/build-entry.js
@@ -0,0 +1,63 @@
'use strict'
const fs = require('fs'),
path = require('path'),
jsonRender = require('json-templater/string'),
uppercamelcase = require('uppercamelcase'),
endOfLine = require('os').EOL,
componentsList = require('../../components.json'),
OUTPUT_PATH = path.join(__dirname, '../../packages/index.js')

const MAIN_TEMPLATE = `/* Automatically generated by './build/bin/build-entry.js' */
{{include}}
const components = [
{{install}},
]
const install = (app, opts = {}) => {
components.forEach(item => {
app.component(item.name, item)
})
app.$AXE = {
size: opts.size || '',
zIndex: opts.zIndex || 1000
}
}
export default {
version: '{{version}}',
install,
{{export}},
}
`,
IMPORT_TEMPLATE = `import {{nameCameraCase}} from './{{name}}/'`

const componentNames = Object.keys(componentsList),
includeTempList = [],
installTempList = [],
exportTempList = []
componentNames.forEach(compItemName => {
const AxeCompCameraName = 'Axe' + uppercamelcase(compItemName)
includeTempList.push(
jsonRender(IMPORT_TEMPLATE, {
name: compItemName,
nameCameraCase: AxeCompCameraName
})
)
installTempList.push(` ${AxeCompCameraName}`)
exportTempList.push(` ${AxeCompCameraName}`)
})

const template = jsonRender(MAIN_TEMPLATE, {
include: includeTempList.join(endOfLine),
install: installTempList.join(',' + endOfLine),
export: exportTempList.join(',' + endOfLine),
version: process.env.VERSION || require('../../package.json').version
})

fs.writeFileSync(OUTPUT_PATH, template)
// DONE
console.log('🎉🎉🎉🎉🎉不骗你,这次是真的完了~🎉🎉🎉🎉🎉')
console.log('[build entry] DONE:', OUTPUT_PATH)

0 comments on commit f4e2471

Please sign in to comment.