tav-ui
Version:
133 lines (97 loc) • 3.92 kB
Markdown
`tav-ui` 是基于 Vue 3 + Typescript + Vite 技术开发的前端 Vue 组件库。该项目采用`pnpm+monorepo`进行包管理,使用`gulp`控制打包流程,`rollup`进行打包。
> 环境依赖 node16 pnpm7
- 文件中用到的自定义类型必须手动复制粘贴过去
- 组件 prop 提出来放在同层的 types 中导入使用
- 通过 pnpm plop:cmp 创建组件
- 每个组件必须只有一个导出，可以把之前的复合组件拆开，参考 basic-\*
- 每次迁移组件结束后打一次包查看 dist 下是否生成 type 文件夹
- utils/hooks/components 中如果用到 utils/hooks/components 的情况，不能直接通过入口导入，要找到确定的文件再导入，避免循环依赖
- 组件必须有 name，格式：TaXx 驼峰命名
- script setup 添加 name 的方式:
```javascript
defineOptions({
name: 'TaDropDown',
})
```
- 禁止在 vue sfc 中出现 script lang="tsx" 的写法，rollup 解析不完整可能会报错。建议：只有用到了 template 或 style 才写 Vue SFC，否则直接写 ts、tsx 文件即可
- refactor(build): element-plus kevin fixed up
=>
1. theme-chalk/gulpfile.ts error, downgrade chalk5.0 to chalk4.1.2; 2. not file or dir [.vue?xxxx&lang.tsx], change lang=tsx to .tsx or .ts
需要先
1. git tag v0.0.1
2. git push --tag
等待 github action 自动发布即可，发布进度在 github 仓库中的 actions 下查看
1. pnpm build 打出 dist
2. 修改自己项目中的 package.json tav-ui 路径为 `"tav-ui": "file:/Users/i7eo/Documents/Company/XA-Castianta/tav-ui/dist/tav-ui"`
3. 重新 yarn install 即可查看
1. 所有对象配置均改为 xxxconfig 和 vxetable 风格一致，例如: `filter => filterFormConfig`，使用前请先查看 vxegrid api 和 tablepro 下的 types
2. ifShow 均改为 enable 和 vxetable 保持一致
3. 按钮权限打散到每个按钮中
tav-ui v8.0.0+ 改动：
全局注入属性，需要添加 appId、userInfo。每个项目都需要加，appId、userInfo 与 components 属性同层级。
表格列配置使用方法：
1. 项目入口 app.vue 中注入 columnsGetApi, columnsSetApi
2. 具体页面使用时，引入 useRouter getTableProId，如下：
```javascript
import { useRouter } from 'vue-router'
import { getTableProId } from 'tav-ui'
```
手动生成唯一 id，传递给 tablepro，如下：
```javascript
const router = useRouter()
const tableProId = ref < string > ''
tableProId.value = getTableProId(router, 'all')
```
然后在 tablepro 的 customactionconfig 中设置 column 为 true 即可。
需要注意的是：
1. 持久化过程中需要给每个 table 生成唯一 id，目前 getTableProId 逻辑的实现是取当前页面的 router name，与传入的字符串组合，所以必须要保证每个 router 都有唯一的英文 name。
2. 表格 column 要使用右侧的列设置,field 中不能含有下划线\_,会影响到 key 的取值
```javascript
//错误示例
columns: [
{
field: 'group_1',
title: '分组1',
children: [
{
field: 'group_1_1',
title: '分组1-1',
customRender: () => {
return 'sssss'
},
},
{
field: 'group_1_2',
title: '分组1-2',
},
],
},
]
//正确示例
columns: [
{
field: 'group1',
title: '分组1',
children: [
{
field: 'group11',
title: '分组1-1',
customRender: () => {
return 'sssss'
},
},
{
field: 'group12',
title: '分组1-2',
},
],
},
]
```
1. 持久化过程中需要给每个table生成唯一id，目前getTableProId逻辑的实现是取当前页面的router name，与传入的字符串组合，所以必须要保证每个router都有唯一的英文name
2. 如果表头有层级则每一层必须加field,field也要保持唯一