1.0.1 • Published 11 months ago

monkeykg-wang-ui v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
11 months ago

关于docs 文档的说明

运行文档 npm run docs:dev 或者 pnpm docs:dev

打包发布

  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. 在 /play/src/App.vue 中导入组件,使用组件

国际化i8n文件 以及 docs文档相关

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

项目使用

  1. npm i monkeykg-wang-ui
  2. 使用 element-plus 的方式导入组件,
  3. 修改 vite.config.js,
    plugins: [
    vue(),
    ElementPlus({
      useSource: true,
      lib: 'monkeykg-wang-ui',
    }),
    ]