使用 vite 构建npm组件工具包

package.json 文件说明

    rimraf: 执行这个命令,可以将指定的目录删除
    
    vite-plugin-dts: 这是一款用于在 库模式 中从 .ts(x) 或 .vue 源文件生成类型文件（*.d.ts）的 Vite 插件
    官网地址: https://github.com/qmhc/vite-plugin-dts/blob/main/README.zh-CN.md

开发使用方法

# 安装依赖
  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 文件中如下引用

import {createApp} from 'vue'
import {ComponentList} from 'hk-core-antdv'

const app = createApp(App);
app.use(ComponentList)

// ComponentList 包含如下组件:  
- <DateCheckableTag/>
- <TableList/>
- <DynamicFormGenerator/>
- <DynamicForm/>

日期组件

• 使用方法

  <!-- 
    属性:
      tags: 要显示的日期选项，默认为所有 ['ALL','TD','YD','TW','LW','TM','LM','CUSTOM']
      exclude-tag: 要排除的日期选项，默认有 ['ALL','TD','YD','TW','LW','TM','LM','CUSTOM']
      defaultSelect: 默认选择的日期, 默认值为 ALL
      
    事件:
        tag-change: 当日期选中后的回调事件， 选中 CUSTOM 不会回调，因为会弹出日期范围选择框
        custom-date-change: 选中 CUSTOM 后，且选中日期或清除日期后的回调事件
  -->
  <DateCheckableTag :exclude-tag="['TD']" @tag-change="data.onTagChange"
         @custom-date-change="data.onCustomDateChange"/>

表格查询组件

• 使用方法

   <!-- 
      属性:
        query-page-call: 列表数据查询回调，是一个函数
        table-attrs: 表格属性:
         如 columns、row-selection，
         对于官网定义的事件，需要使用 onXXX 来定义，如onExpand. 属性参考: https://www.antdv.com/components/table-cn
         rowKey: 默认使用每条记录的id属性，如果没有指定id，则使用通用值 key， 当然，你也可以自己指定 rowKey属性
        params: 查询参数，支持Input/Select/DatePicker 组件
           [{label: "用户名",field: "username",component: "Input or Select or DatePicker",attrs: '对应组件的属性，参考antd vue官网对应的组件'}]
        composite-param: 日期查询条件的属性，可选，如果不设置，不会有日期范围查询条件
             label: 显示名称
             field: 对应的字段名
             defaultSelect: 默认要选中的选项
             excludeTag: 要排除的选项
             tags: 要显示的日期选项，默认为所有 ['ALL','TD','YD','TW','LW','TM','LM','CUSTOM']
             {label:'创建时间',field:'createDate',defaultSelect: 'TD',excludeTag: [''],tags: ['']}
        search-col-span: col对应的属性，默认为6
        showAddButton: 是否显示添加Button , 默认为 true
        showUploadButton: 是否显示上传Button , 默认为 false 
        showDownloadButton: 是否显示下载Button , 默认为 false
        
      事件:
          add-button-click: 添加Button 点击事件
          upload-button-click: 上传Button 点击事件
          download-button-click: 下载Button 点击事件
          loading-data-finish: 数组加载完成后的回调
          loading-data-error: 数组加载出错后的回调
     
      暴露的方法(expose):
         - refreshData()
           父组件在 引用此组件时，加个 ref属性，就可以通过 ref属性的值.value.refreshData() 来调用. 如:
              <TableList ref="tableList" ...其它属性.../>
              如上声明后，就可以通过 tableList.value.refreshData() 来调用 refreshData() 方法
         - startLoading(): table显示加载中spinning
             tableList.value.startLoading()
         - stopLoading(): table停止加载中spinning
             tableList.value.stopLoading()
   
      插槽:
          searchBefore:  在查询条件之前自定义内容
          buttons:  在搜索/添加/上传/下载button 之后自定义内容，和这些默认的button在同一 row/col
          others:   在查询条件之后 另起一行，自定义内容
          bodyCell:  antd table 内容插槽，参考antd 官网 table组件  bodyCell
    -->
  <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>

动态表单

// 注意: 请在入口文件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`

动态表单生成器

<!--  
动态表单编辑:
  属性: showSave: 是否显示 保存按钮，默认为true
  属性: showReset: 是否显示 清空按钮，默认为true
  属性: form: 表单编辑器渲染的对象，默认值为 
    {
      labelColSpan: 4,
      wrapperColSpan: 20,
      align: "right",
      layout: 'horizontal',
      formItems: [] as Array<any>
    }
    
  事件:
      save:点击保存时的事件，接收一个参数，定义表单的属性
  插槽:
      extraActions: 自定义顶部的button
      formExtraAttrs: 自定义表单属性插槽，在表单名称字段之后
-->
<DynamicFormGenerator @save="onSaveHandler" show-save show-reset :form="formModel">
  <!-- extraActions插槽: 自定义顶部的button -->
  <template #extraActions>

  </template>
</DynamicFormGenerator>>

动态表单生成

<!--  
  动态表单编辑
  属性: showSave: 是否显示 保存按钮，默认为true
  属性: showReset: 是否显示 清空按钮，默认为true
  
  事件:
    formData:生成表单的属性，也就是上面 <DynamicFormGenerator /> save事件的第一个参数值
  -->
<DynamicForm ref="dynamicRef" :form="formData"/>
<!--
  验证并获取表单数据:
  const dynamicRef = ref<any>()
  dynamicRef.value.validateFormFields().then(value => {
  }).catch(error => {
    console.log(error)
  })
-->