open-index/open-npm huggingface dataset:
npm package: @qmth/ui
Description: ## 组件文档开发环境启动 ` npm run docs:dev `
Latest version: 1.0.25

# 启明泰和-前端组件库

## 组件文档开发环境启动
`
npm run docs:dev
`

## 组件文档web项目打包
`
npm run docs:build
`
文档打包后的dist文件夹位于docs/.vitepress/dist

## 安装
`
npm install @qmth/ui
`

## 完整引入
在 `main.ts` / `main.js` 中使用如下语句:
```ts
// main.ts
import { createApp } from 'vue'
import QmthUI from '@qmth/ui'
import "@qmth/ui/style.css"
import App from './App.vue'

const app = createApp(App)

app.use(QmthUI)
app.mount('#app')
```


## 局部引入
如果觉得完整引入体积会很大，没关系，本库还支持按需引入!

同样是在`main.ts` / `main.js` 中:
```ts
// main.ts
import { createApp } from 'vue'
import {QmButton} from "@qmth/ui"
import "@qmth/ui/style.css"
import App from './App.vue'

const app = createApp(App)

app.use(QmButton)
app.mount('#app')
```


## 配置自动按需加载(vite场景)
首先需要安装unplugin-vue-components插件：
```shell
npm install unplugin-vue-components -D
```
然后在`vite.config.ts` / `vite.config.js`中：
```ts
import Components from "unplugin-vue-components/vite";

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        (componentName) => {
          console.log("componentName", componentName);
          if (componentName.startsWith("Qm"))
            return { name: componentName.slice(0), from: "@qmth/ui" };
        },
      ],
    }),
  ],
});
```
然后就可以像这样直接使用组件了（无需全局注册，也无需局部import）：
```vue
<qm-button>按钮</qm-button>
```

## 组件描述
- 本套组件是基于ant-design-vue 4.2.1开发，并且集成了ant-design-vue，无需额外安装ant-design-vue。
- 未进行二次封装的ant-design-vue的组件，如input组件，直接使用```<a-input />```这样引入即可。

## 组件意图
- 本套组件的目的不是复用ant-design-vue，侧重点是基于ant-design-vue封装的可复用性高的业务组件（后期会慢慢完善开发更多的业务组件进来）。
- 对ant-design-vue组件的二次封装。
- 公司各前端项目的UI风格统一。