安装

yarn add @zswurun/components

样式

// main.ts
import '@yr/components/dist/style.css'

手动全局注册

// main.ts
import { ResizeTable, ConfigProvider } from '@yr/components'

app.component(ResizeTable.name, ResizeTable)
app.component(ConfigProvider.name, ConfigProvider)

使用 unplugin-vue-components 自动引入，添加配置

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

{
  plugins: {
    Components({
      resolvers: [
        (componentName) => {
          const compoentsName = ['ResizeTable', 'ConfigProvider', 'AModalPro']
          if (
            componentName.startsWith('Y') &&
            compoentsName.includes(componentName.slice(1))
          ) {
            return {
              name: componentName.slice(1),
              from: '@yr/components',
            }
          }
        },
      ],
    })
  }
}

Git 提交日志

yarn commit

目录结构

├─.commitlintrc.json 
├─.editorconfig 
├─.eslintignore 
├─.eslintrc.json 
├─.gitignore 
├─.prettierignore 
├─.prettierrc.json 
├─docs 
│ ├─changelog.md 
│ ├─components 
│ │ └─resize-table.md 
│ ├─getting-started.md 
│ └─index.md 
├─index.html 
├─package.json 
├─public 
├─README.md 
├─script 
│ └─type.cjs 
├─src 
│ ├─App.vue 
│ ├─assets 
│ ├─components.d.ts 
│ ├─lib                       // 组件目录
│ │ ├─config-rovider         // 全局配置组件，跟 ant-design-vue 的类似
│ │ │ ├─config-rovider.vue 
│ │ │ └─index.ts 
│ │ ├─index.ts               // 所有组件入口
│ │ ├─modal                  // 弹窗组件
│ │ │ ├─index.ts 
│ │ │ └─modal.vue 
│ │ └─resize-table           // 表格组件
│ │   ├─index.ts 
│ │   ├─resize-table.vue 
│ │   └─utils.ts 
│ ├─locale                    // 导出的多语言文本
│ │ ├─default.ts 
│ │ ├─en-US.ts 
│ │ ├─index.ts 
│ │ └─zh-CN.ts 
│ ├─main.ts                   // 测试例子页面入口
│ ├─style.css 
│ ├─utils                     // 工具
│ │ └─withInstall.ts         // 辅助注册组件方法
│ └─vite-env.d.ts 
├─tsconfig.json 
├─tsconfig.node.json 
├─vite.config.ts 
└─yarn.lock 

组件文档

yarn docs:dev

执行上方命令可查看对应文档（具体与实际代码配置为准）。

如何添加新组件？

1. 在 src\lib 目录下新建一个组件目录，必须有一个 index.ts 文件为入口文件。
2. 编写好组件后，在组件目录下的 index.ts 文件引入并导出。
3. 在 src\lib\index.ts 添加已创建的组件。

如何测试组件？

在 src\main.ts 文件引入对应组件，然后在 src\App.vue 编写组件测试预览代码即可。