UI-DEMO

About

基于Vue.js的UI组件

NPM Script

npm run

serve //编译启动服务器并热更新进行开发
lint:es //语法检查es并fix
lint:style //语法检查scss文件并fix
lint //语法检查并fix
test //单元测试
doc //生成各组件说明文档
build:js //打包js文件
build:css //打包css文件
build //打包
finish //语法检查&生成文档&打包
publish //发布包至NPM

Customize configuration

See Configuration Reference.

Development

src/components文件夹中创建组件,src/style文件夹中创建对应组件样式文件。样式和组件分离，方便管理。

每个组件分别单独导出注册，样式文件也需要各自引入公共变量等通用文件。方便单独打包，便于按需引入。

组件在src/index.js中进行注册。

example文件夹中创建文件进行组件预览。

Unit Test

使用Jest进行单元测试。

Jest配置在jest.config.js中。

在tests/unit文件夹中创建单元测试文件，命名为xxxx.spec.js

组件单元测试主要有以下几个部分：

• 组件渲染，快照对比

• props传递

• 回调函数执行

• 模拟事件触发，检测核心交互逻辑

可在Vue Test Utils中查看更多测试技巧。

Type Defination

TypeScript类型定义文件“.d.ts"，用于使用TypeScript项目使用组件库。暂不需要生成。

TO DO

Build

在build文件夹中存放构建配置文件。

js总包用vue-cli lib模式默认配置打包，各组件js用webpack单独打包，配置在webpack.components.js文件中。

css用gulp打包，配置在gulp.css.js文件中。

dist文件夹存放构建后的文件。dist/libs文件夹中是组件单独打包文件。

Docs

使用@vuese/cli生成组件说明。配置文件是vuese.config.js

运行npm run doc命令可自动生成组件说明。

文档说明在docs文件夹中。

写法参照示例组件中的注释。

更多请参考@vuese/cli官方文档

License

MIT