简介

此项目为多宝鱼中后台管理系统提供的基础组件库，基于 element plus 扩展而来.此项目只支持 vue3 版本，vue2 版本勿用，vue3 早以成为 vue 的默认版本，vue2 LTS 版本官方支持将于 2023 年结束。请升级为 vue3

项目运行

安装依赖

pnpm i

运行 ui

npm run dev

运行 doc 文档

npm run docs:dev

项目打包发布

未设置过云效仓库 npm-registry，需先设置一下

1. 进入该网页：https://packages.aliyun.com/npm/npm-registry/artifacts
2. 选择 dby-element-plus，选择使用指南

打包发布

1. 修改/packages/element-plus/package.json 中的 version
2. 在根目录运行 npm run build
3. 进入 dist/dby-element-plus，运行 npm publish

新增组件

1. 运行 npm run gen 组件名
2. 运行完命令 在/packages/components 新增组件文件夹，文件夹中包含 vue 文件和 ts 文件
3. 同时在/packages/components/index.ts 中增加一行 export 导出组件
4. 同时在/packages/theme-chalk/src 文件夹中新增 组件名.scss
5. 手动在 packages/element-plus/components.ts 中导出组件，文件上面 import 引入组件，在底部数组中添加

scss 全局变量

1. 在/packages/theme-chalk/common/var.scss 中定义变量，变量区分全局变量和组件变量
2. 在/packages/theme-chalk/src/var.scss 的:root 中引入全局变量，在组件 scss 中使用 set-component-css-var 方法引入组件变量
3. 组件样式文件中通过 getCssVar(变量名， key) 方法使用

组件单元测试

1. 运行 npm run test /packages/components/组件文件夹名
2. 在 /packages/components/组件文件夹名/tests/test.tsx 中修改组件使用方式

组件效果查看

1. 在 /play/src/app.example.vue 中，使用组件

新增文档

crowdin 文件夹中有 json 变更时，必须运行一遍 npm run docs:dev 更新 i18n 文件夹

1. 在 docs/zh-CN/component 文件夹中新增 组件.md
2. 在 .vitepress/crowdin/zh-CN/pages/component.json 中新增组件路由
3. 在 .vitepress/examples 文件夹下新增组件文件夹，放置组件.vue 文件
4. 文件修改完成后，运行 npm run docs:dev 更新 i18n 文件夹，并查看最新文档效果

项目导入

1. npm i dby-element-plus

2. 使用 element-plus 的方式导入组件，

3. 修改 vite.config.js，

   plugins: [
     vue(),
     ElementPlus({
       useSource: true,
       lib: 'dby-element-plus',
     }),
   ]

加入我们

1. 此项目由 袁振兴【今天(2023/05/17)离职】，易成雯【 雯姐，多宝鱼前端一姐，有问题现在请找她】，李文康 进行最初的搭建与开发，截止到 2023/05/17 日，已提交 30 多个小版本
2. 目前公司所有的中后台项目(>20)的前端人员(近 30 人)都在使用此组件库，组件，样式，兼容性等需求日益增多，希望更多人参与进来。目前主要参与人有 黎琦，陈辉，程道永，李宜芳，梁宏飞等
3. 对此项目有任何好的建议或者想参与进来，都可以联系雯姐。
4. 祝大家工作顺利，前程似锦。