# 使用 vite 构建npm组件工具包
## package.json 文件说明
```shell
rimraf: 执行这个命令,可以将指定的目录删除
vite-plugin-dts: 这是一款用于在 库模式 中从 .ts(x) 或 .vue 源文件生成类型文件（*.d.ts）的 Vite 插件
官网地址: https://github.com/qmhc/vite-plugin-dts/blob/main/README.zh-CN.md
```
## 开发使用方法
```shell
# 安装依赖
npm install
# 开发环境运行
npm run dev
# 构建发布包
npm run build
```
## 文件说明
- package.json
依赖包,包说明
- tsconfig.json.ts
相关的配件
- src/main.ts
开发环境的主入口， `npm run dev` 后，会从这个入口执行
- src/index.ts
构建发布包的主入口，如在 `vite.config.ts` 文件中配置的 `build/lib/entry` 属性
- .npmignore
这个文件可以指定 `npm publish` 发布到npm官网上忽略的文件或目录
## 发布到 npm 步骤
> 1, 先注册npm 账号: https://www.npmjs.com/
>
> 2, 本地配置npm 仓库地址: 使用 `npm config get registry`
> 可以查看当前配置，使用 `npm config set registry=https://registry.npmjs.org/` 设置
>
> 3, 执行 npm 登陆. 在命令行执行 `npm login` ，根据提示完成登陆
>
> 4, 本地打包 `npm run build` ，执行完成后，会在当前项目目录生成 `dist` 目录. 这个 `dist` 目录是在 `vite.config.ts`
> 文件中的 `build/outDir` 配置
>
> 5, 发布到 npm 仓库. `npm publish`
## 组件列表
> 组件使用前，需要引入 and
> vue相关的组件有: [Tag, DatePicker, Divider, Button, Tooltip,Row, Col, Form, Space, Table, Input, Select, Tabs]
## 组件使用方法
> 在 main.ts 文件中如下引用
```javascript
import {createApp} from 'vue'
import {ComponentList} from 'hk-core-antdv'
const app = createApp(App);
app.use(ComponentList)
// ComponentList 包含如下组件:
-
-
-
-
```
### 日期组件
- 使用方法
```html
```
### 表格查询组件
- 使用方法
```vue
插槽-刷新
{{ text }}
```
### 动态表单
```ts
// 注意: 请在入口文件main.ts注入全局 $message,
import App from "./App.vue";
import {message} from 'ant-design-vue'
const app = createApp(App);
app.config.globalProperties.$message = message
// 需要安装推拽组件和markdown组件
`npm install vue-draggable-plus @toast-ui/editor -S`
```
#### 动态表单生成器
```vue
>
```
#### 动态表单生成
```vue
```