安装

``bash
yarn add @zswurun/components
`

样式

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

手动全局注册

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

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

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

`ts
// 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 提交日志

`bash
yarn commit
`

目录结构

`text
├─.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
`

组件文档

`bash
yarn docs:dev
`

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

如何添加新组件？

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

如何测试组件？

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