1.0.1 • Published 11 months ago
monkeykg-wang-ui v1.0.1
关于docs 文档的说明
运行文档 npm run docs:dev 或者 pnpm docs:dev
打包发布
- 修改/packages/element-plus/package.json 中的 version
- 在根目录运行 npm run build
- 进入 dist/dby-element-plus,运行 npm publish
新增组件
- 运行 npm run gen 组件名
- 运行完命令 在/packages/components 新增组件文件夹,文件夹中包含 vue 文件和 ts 文件
- 同时在/packages/components/index.ts 中增加一行 export 导出组件
- 同时在/packages/theme-chalk/src 文件夹中新增 组件名.scss
- 手动在 packages/element-plus/components.ts 中导出组件,文件上面 import 引入组件,在底部数组中添加
scss 全局变量
- 在/packages/theme-chalk/common/var.scss 中定义变量,变量区分全局变量和组件变量
- 在/packages/theme-chalk/src/var.scss 的:root 中引入全局变量,在组件 scss 中使用 set-component-css-var 方法引入组件变量
- 组件样式文件中通过 getCssVar(变量名, key) 方法使用
组件效果查看
- 在 /play/src/App.vue 中导入组件,使用组件
国际化i8n文件 以及 docs文档相关
- 在 docs/zh-CN/component 文件夹中新增 组件.md
- 在 .vitepress/crowdin/zh-CN/pages/component.json 中新增组件路由
- 在 docs/examples 文件夹下新增组件文件夹,放置组件.vue 文件
- 文件修改完成后,运行 npm run docs:dev 更新 i18n 文件夹,并查看最新文档效果
项目使用
- npm i monkeykg-wang-ui
- 使用 element-plus 的方式导入组件,
- 修改 vite.config.js,
plugins: [ vue(), ElementPlus({ useSource: true, lib: 'monkeykg-wang-ui', }), ]