cao-ui-demo
v0.4.0
Published
前端低代码组件库(基于JSON Schema)
Downloads
282
Readme
cao-ui-demo
- TRS 前端低代码 PC 组件库(基于ant-design-vue进行二次开发)
- 知识库
技术栈
安装
npm install cao-ui-demo --save-dev
快速上手
import { createApp } from 'vue'
import App from './App.vue'
// 引入组件
import Antd from 'ant-design-vue'
import trsuiweb from 'cao-ui-demo'
// 引入样式
import 'ant-design-vue/dist/antd.css'
import 'cao-ui-demo/lib/style.css'
// 注册组件
const app = createApp(App).use(Antd).use(trsuiweb)
app.mount('#app')
浏览器支持
由于 Vue 3 不再支持 IE,所以组件库也不支持 IE 浏览器。
| Chrome | Edge | Firefox| Safari | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |71+ |80+ |78+ |12.1+ |
目录结构
cao-ui-demo
├─ .husky // commit提交规范配置
├─ config
│ ├─ base.config.ts // 服务构建基础配置
│ ├─ dev.config.ts // 本地服务启动配置
│ ├─ gen-themes.js // 组件的动态主题样式打包
│ ├─ gen-types.js // types类型声明打包
│ ├─ gulpfile.js // 在线文档的主题样式打包
│ ├─ iconInit.js // 获取iconfont中的字体图标
│ ├─ prod.com.config.ts // 库模式打包
│ ├─ prod.doc.config.ts // 在线文档打包
│ └─ utils.ts // README文档解析、高亮配置
├─ packages
│ ├─ components // 公用组件
│ ├─ style
│ │ ├─ common.less // 公用样式
│ │ ├─ index.less // 样式入口文件
│ │ └─ trs-ui-reset // 组件样式
│ │ └─ button.less
│ ├─ theme // 组件主题:暗黑、浅色
│ │ ├─ dark.less
│ │ └─ default.less
│ ├─ utils
│ │ ├─ common.ts // 组件公共ts声明
│ │ ├─ public.ts // 组件公共方法
│ └─ widget
│ ├─ Button // 每个组件单独文件夹
│ │ ├─ index.ts // 局部注册
│ │ └─ index.vue // 模板文件
│ ├─ component.ts // 导出所有组件
│ ├─ index.d.ts // 全局声明
│ └─ index.ts // 全局注册
├─ src // 在线文档
│ ├─ App.vue
│ ├─ assets
│ ├─ axios
│ │ ├─ axios.ts
│ │ └─ interceptors.ts
│ ├─ components // 公用组件
│ ├─ docs // 组件文档,每个组件单独文件夹
│ │ └─ Button
│ │ └─ README.md
│ ├─ main.ts
│ ├─ router
│ │ ├─ index.ts
│ │ └─ routerConfig
│ │ ├─ base.component.ts // 基础组件路由
│ │ ├─ container.component.ts // 复合组件路由
│ │ ├─ data.component.ts // 数据展示组件路由
│ │ ├─ form.component.ts // 数据录入组件路由
│ │ ├─ index.ts
│ │ └─ intro.component.ts // 文档基础介绍路由
│ ├─ style
│ ├─ utils
│ │ └─ common.ts
│ └── views
│ ├─ index.vue
│ ├─ trsForm.vue // 表单复合组件示例页面
│ └─ trsTable.vue // 常规列表复合组件示例页面
├─ tsc // 打包ts声明文件
├─ .cz-config.js // commit提交类型配置
├─ .eslintrc.cjs // ESLint配置文件
├─ .gitignore // git提交忽略配置
├─ .release-it.json // 组件库发版配置
├─ CHANGELOG.md // 更新日志
├─ commitlint.config.js // commit提交错误拦截配置
├─ Dockerfile // Jenkins部署镜像
├─ prettier.config.js // Prettier配置
├─ CHANGELOG.md // 更新日志
├─ .eslintrc.cjs // ESLint配置文件
├─ .cz-config.js // commit提交类型配置
├─ tsconfig.config.json // ts类型声明生成配置
└─ tsconfig.json // ts类型校验
项目基础设置
支持的 node 版本:>=16.0.0,推荐使用最新稳定node版本
npm install
本地服务
npm run dev
线上环境
npm run build
ESLint检查
npm run lint
node包构建
npm run build:com
node包发版
npm run release