qz-element

基于 ElementUI，定制强智业务公共组件库

目录介绍

• public 公共资源
• docs 静态文档
• build 构建相关
• packages 组件目录
• src 开发代码
• site 打包生成后的文档网站
• lib 打包生成后的包文件目录
• types *.d.ts
• components.json 组件列表文件
• .babelrc babel 打包配置文件
• .eslintrc.js eslint 代码检查配置文件
• .prettierrc prettier 代码格式化配置文件
• jsconfig.json vscode js 配置文件
• package.json 包配置文件
• Makefile make 命令相关配置
• styleguide.config.js vue-styleguidist 配置文件

命令介绍

make 命令

• make new [common-table] 新增组件 该命令会将会自动创建一系列文件，以便于组件的开发
  1. 在packages目录下生成common-table/index.js文件
  2. 在packages目录下生成common-table/main.vue文件
  3. 在types目录下生成common-table.d.ts文件
  4. 在types/qzdata-component.d.ts中添加组件定义
• make entry 编译入口文件 在src目录下生成index.js文件
• make serve 启动开发环境 调用npm run serve。
• make site 编译生成文档站点文件 调用npm run site。
• make lib 编译生成组件库相关文件 调用npm run lib。

npm 命令

如果你的环境安装了yarn或者pnpm，可以自行切换命令。

• serve: 通过vue-styleguidist启动开发服务
• site: 通过vue-styleguidist编译文档站点
• lib: 编译生成组件库文件
  1. node build/entry: 编译入口
  2. rimraf lib删除 lib 目录
  3. webpck --config=build/config/webpack.umd 编译组件库 umd 规范文件
  4. webpack --config=build/config/webpack.component 编译组件库中单文件组件(commonjs)
  5. webpack --config=build/config/webpack.common 编译组件库 commonjs 规范文件

注意事项

因为生成文档站点打包，调用的buble包（vue-styleguidist内置），所以在 md 文档中，不支持使用async\await语法，否则会报错。