hk-core-antdv

# 使用 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 包含如下组件: - <DateCheckableTag/> - <TableList/> - <DynamicFormGenerator/> - <DynamicForm/> ``` ### 日期组件 - 使用方法 ```html  <DateCheckableTag :exclude-tag="['TD']" @tag-change="data.onTagChange" @custom-date-change="data.onCustomDateChange"/> ``` ### 表格查询组件 - 使用方法 ```vue  <TableList :params="data.params" show-download-button show-upload-button @upload-button-click="() => proxy.$message.info('你点击了上传按钮')" @download-button-click="() => proxy.$message.info('你点击了下载按钮')" @add-button-click="() => proxy.$message.info('你点击了添加按钮')" :composite-param="{label:'创建时间',field:'createDate',defaultSelect: 'TD'}" :query-page-call="data.queryAll" :table-attrs="data.tableAttrs"> <template #buttons> <a-button type="primary" @click="() => proxy.$message.info('你点击了自定义插槽刷新')"> <undo-outlined/> 插槽-刷新 </a-button> </template> <template #bodyCell="{text, record, index, column}"> <template v-if="column.dataIndex != 'action'">{{ text }}</template> <template v-else> <a-space> <a-tooltip placement="topLeft" title="编辑" :style="{cursor:'pointer'}" @click="() => proxy.$message.info(`你点击了编辑:Id: ${record.id},名称: ${record.name}`)"> <edit-outlined :style="{color: '#1677ff'}"/> </a-tooltip> <a-tooltip placement="topLeft" title="删除" :style="{cursor:'pointer'}" @click="() => proxy.$message.info(`你点击了删除:Id: ${record.id},名称: ${record.name}`)"> <delete-outlined :style="{color: '#1677ff'}"/> </a-tooltip> </a-space> </template> </template> </TableList> ``` ### 动态表单 ```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` ``` #### 动态表单生成器 ![](https://gitee.com/kevin-core/hk-core-antdv/raw/master/src/demo/DynamicForm.gif) ```vue  <DynamicFormGenerator @save="onSaveHandler" show-save show-reset :form="formModel">  <template #extraActions> </template> </DynamicFormGenerator>> ``` #### 动态表单生成 ```vue  <DynamicForm ref="dynamicRef" :form="formData"/>  ```