• 使用vite+npm封装组件库并发布到npm仓库

    组件库背景：使用elementplus+vue封装了一个通过表单组件。通过JSX对el-form下的el-input和el-button等表单进行统一封装，最后达到，通过数据即可一键生成页面表单的功能。

    1.使用vite创建vue项目

    npm create vite@latest elementplus-auto-form -- --template vue

    2.项目目录

    注意此处main.js入口文件只是当前项目入口文件，组件库打包的入口文件还是封装Form表单组件下的index.js

    3.封装TFrom.vue

    表单+表单校验+JSX生成表单项

    TForm.vue:

    1. <template>
    2.   <el-form ref="FormRef"
    3.     :class="formBorder?'form-border':''"
    4.     :model="modelForm"
    5.     :rules="editable ? rules : {}"
    6.     :inline="inline"
    7.     :label-position="labelPosition"
    8.     :label-width="labelWidth">
    9.     <slot name="header">slot>
    10.     <el-row :gutter="elRowGutter">
    11.       <el-col v-for="(item,index) in data"
    12.               :span="item.span" :key="index">
    13.               
    14.         <el-form-item v-if="!item.isHidden" :class="isCustom?'custom-form-item':''" :label="item.label ? item.label + '：' : ''"
    15.                       :prop="item.prop"
    16.                       :label-width="item.labelWidth">
    17.           <FormItem :formData="modelForm"
    18.                     :editable="editable"
    19.                     :data="item">
    20.           FormItem>
    21.           <FormItem v-if="item.children" :formData="modelForm"
    22.                     :editable="editable"
    23.                     :clearable="false"
    24.                     :data="item.children">
    25.           FormItem>
    26.           
    27.         el-form-item>
    28.       el-col>
    29.       <el-col class="button-list" v-if="btnList && btnList.length"
    30.               :span="24">
    31.         <el-form-item :class="isCustom?'custom-form-item':''">
    32.           <div v-for="(item,index) in btnList" :key="index">
    33.             <FormButton :formData="modelForm"
    34.                     :editable="editable"
    35.                     :data="item"
    36.                     @on-click="onClick(item)"
    37.                     >FormButton>
    38.           div>
    39.         el-form-item>
    40.       el-col>
    41.       <slot name="footer">slot>
    42.     el-row>
    43.   el-form>
    44. template>
    45.  
    46. <script setup>
    47. import { ref } from 'vue'
    48. import formItem from './FormItem.jsx'
    49. import formButton from './FormButton.jsx'
    50.  
    51. // 除data外其他都不是必传项
    52. const prop = defineProps({
    53.   modelForm:{
    54.     type: Object,
    55.     require: true,
    56.   },
    57.   rules: {
    58.     type: Object,
    59.     default: {}
    60.   },
    61.   data: {
    62.     type: Object,
    63.     require: true,
    64.     default: []
    65.   },
    66.   inline:{
    67.     type: Boolean,
    68.     default: true
    69.   },
    70.   labelWidth: {
    71.     type: String,
    72.     default: '120'
    73.   },
    74.   labelPosition: {
    75.     type: String,
    76.     default: 'right'
    77.   },
    78.   editable: {
    79.     type: Boolean,
    80.     default: true
    81.   },
    82.   colLayout: {
    83.     type: Object,
    84.     default(){
    85.       return {
    86.         xl: 5, //2K屏等
    87.         lg: 8, //大屏幕，如大桌面显示器
    88.         md: 12, //中等屏幕，如桌面显示器
    89.         sm: 24, //小屏幕，如平板
    90.         xs: 24 //超小屏，如手机
    91.       }
    92.     }
    93.   },
    94.   elRowGutter: {
    95.     type: Number,
    96.     default: 10
    97.   },
    98.   size: {
    99.     type: String,
    100.     default: 'default'
    101.   },
    102.   btnList:{
    103.     type: Object,
    104.     default: []
    105.   },
    106.   formBorder:{
    107.     type: Boolean,
    108.     default: false
    109.   },
    110.   formRef:{
    111.     type: String,
    112.     default: 'formRef'
    113.   },
    114.   customFormItem:{
    115.     type: Boolean,
    116.     default: false
    117.   }
    118.  
    119. })
    120.  
    121. const FormItem = formItem();
    122. const FormButton = formButton();
    123.  
    124. const FormRef = ref()
    125. const isCustom = ref(false);
    126.  
    127. // 表单按钮
    128. function onClick(data) {
    129.   if (!data.onClick) return
    130.   data.onClick()
    131. }
    132.  
    133. // 表单校验
    134. async function validate() {
    135.   if (!FormRef.value) return
    136.   const result = await FormRef.value.validate()
    137.   return result;
    138. }
    139.  
    140. // 清除表单验证
    141. async function resetFields() {
    142.   if(!FormRef.value) return await FormRef.value.resetFields();
    143.   return await FormRef.value.resetFields()
    144. }
    145.  
    146. // 自定义el-form-item样式
    147. if(prop.customFormItem){
    148.   isCustom.value = true;
    149. }
    150.  
    151. defineExpose({
    152.   validate,
    153.   resetFields,
    154. })
    155.  
    156. script>
    157. <style scoped>
    158. .button-list{
    159.   display: flex;
    160.   justify-content: center;
    161. }
    162.  
    163. .form-border {
    164.   width: 94%;
    165.   border: solid 2px rgba(219, 217, 217, 0.6);
    166.   border-radius: 10px;
    167.   margin-left: auto;
    168.   margin-right: auto;
    169.   padding: 20px;
    170. }
    171.  
    172. .custom-form-item {
    173.   margin-bottom: 4px;
    174.   margin-right: 12px;
    175.   margin-left: 12px;
    176. }
    177. style>
    178.

    FormItem.jsx:

    1. import {
    2.     ElInput,
    3.     ElSelect,
    4.     ElOption,
    5.     ElButton
    6.   } from 'element-plus'
    7.  
    8. import { defineComponent } from 'vue'
    9.  
    10.   // 普通显示
    11. const Span = (form, data) => (
    12.     <span>{data}span>
    13.   )
    14.  
    15. // 输入框
    16. const Input = (form, data) => (
    17.   <ElInput
    18.       v-model={form[data.field]}
    19.       type={data.type}
    20.       input-style={data.inputStyle}
    21.       size={data.size}
    22.       autocomplete={data.autocomplete}
    23.       show-password={data.type == 'password'}
    24.       clearable
    25.       placeholder={data.placeholder}
    26.       autosize = {{
    27.         minRows: 3,
    28.         maxRows: 4,
    29.       }}
    30.       {...data.props}
    31.     >
    32.     ElInput>
    33.   )
    34. // 文本框
    35. const Textarea = (form, data) => (
    36.   <ElInput
    37.       v-model={form[data.field]}
    38.       type={data.type}
    39.       input-style={data.inputStyle}
    40.       size={data.size}
    41.       // 设置rows就不能设置自适应autosize
    42.       rows={data.rows}
    43.       clearable={data.clearable}
    44.       placeholder={data.placeholder}
    45.       {...data.props}
    46.     >{data.rows}
    47.     ElInput>
    48.   )
    49.  
    50.   const setLabelValue = (_item, { optionsKey } = {}) => {
    51.     return {
    52.       label: optionsKey ? _item[optionsKey.label] : _item.label,
    53.       value: optionsKey ? _item[optionsKey.value] : _item.value,
    54.     }
    55.   }
    56.   // 选择框
    57.   const Select = (form, data) => (
    58.     <ElSelect
    59.       size={data.size}
    60.       v-model={form[data.field]}
    61.       filterable
    62.       style={data.style}
    63.       clearable={data.clearable}
    64.       placeholder={data.placeholder}
    65.       {...data.props}
    66.     >
    67.       {data.options.map((item) => {
    68.         return <ElOption {...setLabelValue(item, data)} />
    69.       })}
    70.     ElSelect>
    71.   )
    72.  
    73.   const Button = (form, data) =>{
    74.     <ElButton
    75.         type={data.type}
    76.         size={data.size}
    77.         icon={data.icon}
    78.         plain={data.plain}
    79.         click={data.clickBtn}
    80.         value={data.value}
    81.     >ElButton>
    82.   }
    83.  
    84.   const setFormItem = (
    85.     form,
    86.     data,
    87.     editable,
    88.   ) => {
    89.     if (!form) return null
    90.     if (!editable) return Span(form, data)
    91.  
    92.     switch (data.type) {
    93.       case 'input':
    94.         return Input(form, data)
    95.       case 'textarea':
    96.         return Textarea(form, data)
    97.       case 'password':
    98.         return Input(form, data)
    99.         // 输入框只能输入数字
    100.       case 'number':
    101.         return Input(form, data)
    102.       case 'select':
    103.         return Select(form, data)
    104.       case 'date':
    105.       case 'daterange':
    106.         return Date(form, data)
    107.       case 'time':
    108.         return Time(form, data)
    109.       case 'radio':
    110.         return Radio(form, data)
    111.       case 'checkbox':
    112.         return Checkbox(form, data)
    113.       case 'button':
    114.         return Button(form, data)
    115.       default:
    116.         return null
    117.     }
    118.   }
    119.  
    120.   export default () =>
    121.   defineComponent({
    122.     props: {
    123.       data: Object,
    124.       formData: Object,
    125.       editable: Boolean,
    126.     },
    127.     setup(props) {
    128.       return () =>
    129.         props.data
    130.           ? setFormItem(props.formData, props.data, props.editable)
    131.           : null
    132.     },
    133.   })

     按需引入elementplus：

    1. // element-plus按需导入
    2. import AutoImport from 'unplugin-auto-import/vite'
    3. import Components from 'unplugin-vue-components/vite'
    4. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
    5. import vueJsx from '@vitejs/plugin-vue-jsx'
    6. import path from 'path'
    7.  
    8. ...
    9.  plugins: [
    10.     vue(),
    11.     // 用到JSX语法
    12.     vueJsx(),
    13.     AutoImport({
    14.       resolvers: [ElementPlusResolver()],
    15.     }),
    16.     Components({
    17.       resolvers: [ElementPlusResolver()],
    18.     }),
    19.   ],
    20.   resolve: {
    21.     alias: {
    22.       '@':  path.resolve(__dirname, 'src')
    23.     }
    24.   },
    25. ...

    通过install插件方式进行使用：

    1. import TForm from "./TForm.vue";
    2.  
    3. export default {
    4.     install (app) {
    5.         // 在app上进行扩展，app提供 component directive 函数
    6.         // 如果要挂载原型 app.config.globalProperties 方式
    7.         // "TForm"自定义即可
    8.         app.component("TForm", TForm);
    9.     }
    10. }

    4.打包配置

    设置打包文件名，包路径等

    注意打包入口为index.js文件(需要使用导出install方法中的组件)，而不是main.js文件（main.js中引入index.js只是用于本地测试）

    1.   build: {
    2. 		outDir: "elementplus-auto-form", //输出文件名称
    3. 		lib: {
    4. 			entry: path.resolve(__dirname, "./src/package/index.js"), //指定组件编译入口文件
    5. 			name: "elementplus-auto-form",
    6. 			fileName: "elementplus-auto-form",
    7. 		}, //库编译模式配置
    8. 		rollupOptions: {
    9. 			// 确保外部化处理那些你不想打包进库的依赖
    10. 			external: ["vue"],
    11. 			output: {
    12. 				// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
    13. 				globals: {
    14. 					vue: "Vue",
    15. 				},
    16. 			},
    17. 		}, 
    18. 	},

    npm run build进行打包  

    5.在打好的包下，创建package.json文件 

    在package.json文件中对，包版本等信息进行配置

    1. {
    2.   "name": "elementplus-auto-form",
    3.   "version": "1.0.0",
    4.   "description": "对elementplus的form表单进行封装，达到根据数据一键生成表单功能",
    5.   "keywords": ["elementplus","el-form","auto-form"],
    6.   "main": "elementplus-auto-form.js",
    7.   "scripts": {
    8.     "test": "echo \"Error: no test specified\" && exit 1"
    9.   },
    10.   "author": "xxx",
    11.   "license": "ISC",
    12.   "private": false
    13. }

    6.上传到npm仓库

    1. 在npm官网创建自己的账号并登录。
    2. 在打包好的文件路径下：使用npm login会跳转到npm官网进行登录；
    3. 登录完成后，将镜像源改为npm官方：npm config set registry=https://registry.npmjs.org
    4. 然后使用npm publish将包上传到npm仓库

    7.从npm下载包并进行测试

    将镜像切回到淘宝源：

    npm config set registry https://registry.npm.taobao.org

    查看当前镜像源：

    npm config get registry 

    配置到淘宝镜像后，首先会到淘宝镜像中下载，没有则去npm官网进行下载 

    下载后node_modules下的包：

    8.代码中使用包elementplus-auto-form

    1. //main.js
    2. import 'elementplus-auto-form/style.css'
    3. import TForm from "elementplus-auto-form"; 
    4.  
    5. const app = createApp(App);
    6. app.use(router).use(TForm).mount('#app')

    Form.vue页面使用：

    1. <script setup>
    2. import { reactive } from 'vue'
    3. import cronjobConfig from './cronjobConfig'
    4. const formItems = cronjobConfig.value.formItems ? cronjobConfig.value.formItems : {};
    5. const cronjobForm = reactive({
    6.   iffLength: '1793',
    7.   keySize: '',
    8.   dataFileName: '',
    9.   wfdName: '',
    10.   version:''
    11. })
    12. script>
    13.  
    14. <template>
    15.   <t-form ref="cronjobFormRef" :btnList="cronjobConfig.buttons" :modelForm="cronjobForm" :formBorder="true"
    16.       :rules="cronjobConfig.rules" :data="formItems">
    17.       <template #header>
    18.         <b>请输入转码程序生成条件：b><br /><br />
    19.       template>
    20.     t-form>
    21. template>

     测试数据：

    1. import { DocumentDelete, Edit, Download } from '@element-plus/icons-vue'
    2. import { shallowRef ,ref } from 'vue'
    3.  
    4. let checkNum = (rule, value, callback) => {
    5.     // 函数用于检查其参数是否是非数字值,如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。
    6.     if (isNaN(value)) {
    7.         return callback("iffLength must be a number");
    8.     }
    9.     return callback();
    10. }
    11. let checkVersion = (rule, value, callback) => {
    12.     let regex = /^V(\d{2})[A-L]$/;
    13.     if (regex.test(value)) {
    14.         callback();
    15.         return true;
    16.     } else {
    17.         callback(new Error("Version must be similar to 'V23G'"));
    18.         return false;
    19.     }
    20. }
    21.  
    22. const cronjobConfig = ref({
    23.     rules: {
    24.         iffLength: [
    25.             { required: true, message: 'Please input iff length', trigger: 'blur' },
    26.             { validator: checkNum, trigger: "blur" }
    27.         ],
    28.         keySize: [
    29.             { required: true, message: 'Please select key size', trigger: 'change', }
    30.         ],
    31.         dataFileName: [{
    32.             required: true,
    33.             message: 'Please input data filename',
    34.             trigger: 'blur',
    35.         }],
    36.         wfdName: [{
    37.             required: true,
    38.             message: 'Please input wfd name',
    39.             trigger: 'blur',
    40.         }],
    41.         version: [{ required: true, message: 'Please input version', trigger: 'blur' },
    42.             { validator: checkVersion, trigger: "blur" }
    43.         ]
    44.     },
    45.     formItems: [{
    46.             field: 'iffLength',
    47.             prop: 'iffLength',
    48.             label: 'iff length',
    49.             placeholder: '1793',
    50.             labelWidth: '150px',
    51.             type: 'input',
    52.             // size: 'small',
    53.             span: 12,
    54.         },
    55.         {
    56.             field: 'keySize',
    57.             prop: 'keySize',
    58.             type: 'select',
    59.             label: 'key size',
    60.             placeholder: 'select key size',
    61.             // editable: true,
    62.             // size: 'small',
    63.             span: 12,
    64.             options: [{ label: 6, value: 6 }, { label: 9, value: 9 }]
    65.         },
    66.         {
    67.             field: 'dataFileName',
    68.             prop: 'dataFileName',
    69.             type: 'input',
    70.             label: 'data filename',
    71.             labelWidth: '150px',
    72.             placeholder: 'data filename',
    73.             // isHidden: false,
    74.             span: 12,
    75.         },
    76.         {
    77.             field: 'wfdName',
    78.             prop: 'wfdName',
    79.             type: 'input',
    80.             label: 'WFD name',
    81.             placeholder: 'WFD name',
    82.             span: 12,
    83.         },
    84.         {
    85.             field: 'version',
    86.             prop: 'version',
    87.             type: 'input',
    88.             label: 'version',
    89.             labelWidth: '150px',
    90.             placeholder: 'version',
    91.             span: 12,
    92.         },
    93.     ],
    94.     // 按钮
    95.     buttons: [{
    96.             name: '生成转码程序',
    97.             title: 'generateCronjob',
    98.             type: 'primary',
    99.             size: 'default', //可以是default，small,large
    100.             icon: shallowRef(Edit),
    101.             // 按钮是否为朴素类型
    102.             // plain: true,
    103.             onClick: null
    104.         }, {
    105.             name: '重置',
    106.             type: 'info',
    107.             title: 'resetCronjob',
    108.             size: 'default',
    109.             icon: shallowRef(DocumentDelete),
    110.             // plain: true,
    111.             onClick: null
    112.         },
    113.         {
    114.             name: '下载转码程序',
    115.             type: 'success',
    116.             title: 'downloadCronjob',
    117.             size: 'default',
    118.             icon: shallowRef(Download),
    119.             isHidden: true,
    120.             // plain: true,
    121.             onClick: null
    122.         }
    123.     ],
    124.     ref: 'cronjobFormRef',
    125.     labelWidth: '120px',
    126.     labelPosition: 'right',
    127.     inline: true,
    128.     editable: true,
    129.     // 单元列之间的间隔
    130.     elRowGutter: 20,
    131.     // size: 'small',
    132.     // 是否需要form边框
    133.     formBorder: true,
    134.     colLayout: {
    135.         xl: 5, //2K屏等
    136.         lg: 8, //大屏幕，如大桌面显示器
    137.         md: 12, //中等屏幕，如桌面显示器
    138.         sm: 24, //小屏幕，如平板
    139.         xs: 24 //超小屏，如手机
    140.     }
    141. });
    142.  
    143. export default cronjobConfig;

    9.测试效果

  • 相关阅读:
    删除有序数组中的重复项Ⅱ--------题解报告
    GBase 8c结果集类型
    7.Spring — 声明式事务
    nginx反向代理负载均衡实战
    6┃音视频直播系统之 WebRTC 核心驱动SDP规范协商
    麒麟v10系统，在虚拟机上直接连公司同一个局域网，设置静态ip
    网络请求-Android篇(Okhttp和Retrofit)
    【源码+文档+调试】springboot文化传承小程序的设计与实现小程序源码分享
    Dockerfile的概述和构建
    【论文基本功】【LaTeX】个人常用易忘LaTeX命令
  • 原文地址：https://blog.csdn.net/qq_34569497/article/details/133643863