Trs-ui-web NPM

trs-ui-web

TRS 前端低代码 PC 组件库（基于ant-design-vue进行二次开发）
知识库

技术栈

安装

npm install trs-ui-web --save-dev

快速上手

import { createApp } from 'vue'
import App from './App.vue'
// 引入组件
import Antd from 'ant-design-vue'
import trsuiweb from 'trs-ui-web'
// 引入样式
import 'ant-design-vue/dist/antd.css'
import 'trs-ui-web/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+

目录结构

trs-ui-web
├─ .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类型校验