使用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:

<template><el-form ref="FormRef":class="formBorder?'form-border':''":model="modelForm":rules="editable ? rules : {}":inline="inline":label-position="labelPosition":label-width="labelWidth"><slot name="header"></slot><el-row :gutter="elRowGutter"><el-col v-for="(item,index) in data":span="item.span" :key="index"><!-- !item.isHidden为控制页面控件显示与否 --><el-form-item v-if="!item.isHidden" :class="isCustom?'custom-form-item':''" :label="item.label ? item.label + '：' : ''":prop="item.prop":label-width="item.labelWidth"><FormItem :formData="modelForm":editable="editable":data="item"></FormItem><FormItem v-if="item.children" :formData="modelForm":editable="editable":clearable="false":data="item.children"></FormItem></el-form-item></el-col><el-col class="button-list" v-if="btnList && btnList.length":span="24"><el-form-item :class="isCustom?'custom-form-item':''"><div v-for="(item,index) in btnList" :key="index"><FormButton :formData="modelForm":editable="editable":data="item"@on-click="onClick(item)"></FormButton></div></el-form-item></el-col><slot name="footer"></slot></el-row></el-form>
</template><script setup>
import { ref } from 'vue'
import formItem from './FormItem.jsx'
import formButton from './FormButton.jsx'// 除data外其他都不是必传项
const prop = defineProps({modelForm:{type: Object,require: true,},rules: {type: Object,default: {}},data: {type: Object,require: true,default: []},inline:{type: Boolean,default: true},labelWidth: {type: String,default: '120'},labelPosition: {type: String,default: 'right'},editable: {type: Boolean,default: true},colLayout: {type: Object,default(){return {xl: 5, //2K屏等lg: 8, //大屏幕，如大桌面显示器md: 12, //中等屏幕，如桌面显示器sm: 24, //小屏幕，如平板xs: 24 //超小屏，如手机}}},elRowGutter: {type: Number,default: 10},size: {type: String,default: 'default'},btnList:{type: Object,default: []},formBorder:{type: Boolean,default: false},formRef:{type: String,default: 'formRef'},customFormItem:{type: Boolean,default: false}})const FormItem = formItem();
const FormButton = formButton();const FormRef = ref()
const isCustom = ref(false);// 表单按钮
function onClick(data) {if (!data.onClick) returndata.onClick()
}// 表单校验
async function validate() {if (!FormRef.value) returnconst result = await FormRef.value.validate()return result;
}// 清除表单验证
async function resetFields() {if(!FormRef.value) return await FormRef.value.resetFields();return await FormRef.value.resetFields()
}// 自定义el-form-item样式
if(prop.customFormItem){isCustom.value = true;
}defineExpose({validate,resetFields,
})</script>
<style scoped>
.button-list{display: flex;justify-content: center;
}.form-border {width: 94%;border: solid 2px rgba(219, 217, 217, 0.6);border-radius: 10px;margin-left: auto;margin-right: auto;padding: 20px;
}.custom-form-item {margin-bottom: 4px;margin-right: 12px;margin-left: 12px;
}
</style>

FormItem.jsx:

import {ElInput,ElSelect,ElOption,ElButton} from 'element-plus'import { defineComponent } from 'vue'// 普通显示
const Span = (form, data) => (<span>{data}</span>)// 输入框
const Input = (form, data) => (<ElInputv-model={form[data.field]}type={data.type}input-style={data.inputStyle}size={data.size}autocomplete={data.autocomplete}show-password={data.type == 'password'}clearableplaceholder={data.placeholder}autosize = {{minRows: 3,maxRows: 4,}}{...data.props}></ElInput>)
// 文本框
const Textarea = (form, data) => (<ElInputv-model={form[data.field]}type={data.type}input-style={data.inputStyle}size={data.size}// 设置rows就不能设置自适应autosizerows={data.rows}clearable={data.clearable}placeholder={data.placeholder}{...data.props}>{data.rows}</ElInput>)const setLabelValue = (_item, { optionsKey } = {}) => {return {label: optionsKey ? _item[optionsKey.label] : _item.label,value: optionsKey ? _item[optionsKey.value] : _item.value,}}// 选择框const Select = (form, data) => (<ElSelectsize={data.size}v-model={form[data.field]}filterablestyle={data.style}clearable={data.clearable}placeholder={data.placeholder}{...data.props}>{data.options.map((item) => {return <ElOption {...setLabelValue(item, data)} />})}</ElSelect>)const Button = (form, data) =>{<ElButtontype={data.type}size={data.size}icon={data.icon}plain={data.plain}click={data.clickBtn}value={data.value}></ElButton>}const setFormItem = (form,data,editable,) => {if (!form) return nullif (!editable) return Span(form, data)switch (data.type) {case 'input':return Input(form, data)case 'textarea':return Textarea(form, data)case 'password':return Input(form, data)// 输入框只能输入数字case 'number':return Input(form, data)case 'select':return Select(form, data)case 'date':case 'daterange':return Date(form, data)case 'time':return Time(form, data)case 'radio':return Radio(form, data)case 'checkbox':return Checkbox(form, data)case 'button':return Button(form, data)default:return null}}export default () =>defineComponent({props: {data: Object,formData: Object,editable: Boolean,},setup(props) {return () =>props.data? setFormItem(props.formData, props.data, props.editable): null},})

 按需引入elementplus：

// element-plus按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path from 'path'...plugins: [vue(),// 用到JSX语法vueJsx(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],resolve: {alias: {'@':  path.resolve(__dirname, 'src')}},
...

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

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

4.打包配置

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

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

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

npm run build进行打包  

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

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

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

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

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

Form.vue页面使用：

<script setup>
import { reactive } from 'vue'
import cronjobConfig from './cronjobConfig'
const formItems = cronjobConfig.value.formItems ? cronjobConfig.value.formItems : {};
const cronjobForm = reactive({iffLength: '1793',keySize: '',dataFileName: '',wfdName: '',version:''
})
</script><template><t-form ref="cronjobFormRef" :btnList="cronjobConfig.buttons" :modelForm="cronjobForm" :formBorder="true":rules="cronjobConfig.rules" :data="formItems"><template #header><b>请输入转码程序生成条件：</b><br /><br /></template></t-form>
</template>

 测试数据：

import { DocumentDelete, Edit, Download } from '@element-plus/icons-vue'
import { shallowRef ,ref } from 'vue'let checkNum = (rule, value, callback) => {// 函数用于检查其参数是否是非数字值,如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。if (isNaN(value)) {return callback("iffLength must be a number");}return callback();
}
let checkVersion = (rule, value, callback) => {let regex = /^V(\d{2})[A-L]$/;if (regex.test(value)) {callback();return true;} else {callback(new Error("Version must be similar to 'V23G'"));return false;}
}const cronjobConfig = ref({rules: {iffLength: [{ required: true, message: 'Please input iff length', trigger: 'blur' },{ validator: checkNum, trigger: "blur" }],keySize: [{ required: true, message: 'Please select key size', trigger: 'change', }],dataFileName: [{required: true,message: 'Please input data filename',trigger: 'blur',}],wfdName: [{required: true,message: 'Please input wfd name',trigger: 'blur',}],version: [{ required: true, message: 'Please input version', trigger: 'blur' },{ validator: checkVersion, trigger: "blur" }]},formItems: [{field: 'iffLength',prop: 'iffLength',label: 'iff length',placeholder: '1793',labelWidth: '150px',type: 'input',// size: 'small',span: 12,},{field: 'keySize',prop: 'keySize',type: 'select',label: 'key size',placeholder: 'select key size',// editable: true,// size: 'small',span: 12,options: [{ label: 6, value: 6 }, { label: 9, value: 9 }]},{field: 'dataFileName',prop: 'dataFileName',type: 'input',label: 'data filename',labelWidth: '150px',placeholder: 'data filename',// isHidden: false,span: 12,},{field: 'wfdName',prop: 'wfdName',type: 'input',label: 'WFD name',placeholder: 'WFD name',span: 12,},{field: 'version',prop: 'version',type: 'input',label: 'version',labelWidth: '150px',placeholder: 'version',span: 12,},],// 按钮buttons: [{name: '生成转码程序',title: 'generateCronjob',type: 'primary',size: 'default', //可以是default，small,largeicon: shallowRef(Edit),// 按钮是否为朴素类型// plain: true,onClick: null}, {name: '重置',type: 'info',title: 'resetCronjob',size: 'default',icon: shallowRef(DocumentDelete),// plain: true,onClick: null},{name: '下载转码程序',type: 'success',title: 'downloadCronjob',size: 'default',icon: shallowRef(Download),isHidden: true,// plain: true,onClick: null}],ref: 'cronjobFormRef',labelWidth: '120px',labelPosition: 'right',inline: true,editable: true,// 单元列之间的间隔elRowGutter: 20,// size: 'small',// 是否需要form边框formBorder: true,colLayout: {xl: 5, //2K屏等lg: 8, //大屏幕，如大桌面显示器md: 12, //中等屏幕，如桌面显示器sm: 24, //小屏幕，如平板xs: 24 //超小屏，如手机}
});export default cronjobConfig;

9.测试效果

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/129539.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

React核心原理与实际开发

React核心原理与实际开发

学习目标 React是啥&#xff1f; 官方定义&#xff1a;将前端请求获取到的数据渲染为HTML视图的JavaScript库。 一、React入门 1、React项目创建 直接创建react&#xff0c;使用初始化会创建package.json npm init -y再安装 2、React基本使用 使用纯JS创建ReactDOM&#…
阅读更多...
[PowerQuery] PowerAutoMate 刷新PowerBI 数据

[PowerQuery] PowerAutoMate 刷新PowerBI 数据

通过PowerBI Automate 进行PowerBI 数据刷新之前，需要有Power Automate 授权或者Power Automate 试用账户，可以通过如下的地址进行申请注册。 https://flow.microsoft.com/zh-cn/ 完成Power Automate 登录之后，选中计划的云端流后创建，图为创建计划的云端流的操作步骤。 …
阅读更多...
JVM CMS和G1执行过程比较

JVM CMS和G1执行过程比较

CMS CMS&#xff08;Concurrent Mark Sweep&#xff09;收集器是一种以获取最短回收停顿时间为目标的收集器。由于大部分 Java 应用主要集中在互联网网站以及基于浏览器的 B/S 系统的服务端&#xff0c;这类应用通常会较为关注服务的响应速度&#xff0c;希望系统的停顿时间尽…
阅读更多...
JS进阶-原型

JS进阶-原型

原型 原型就是一个对象&#xff0c;也称为原型对象 构造函数通过原型分配的函数是所有对象所共享的 JavaScript规定&#xff0c;每一个构造函数都有一个prototype属性&#xff0c;指向另一个对象&#xff0c;所以我们也称为原型对象 这个对象可以挂载函数&#xff0c;对象实…
阅读更多...
10-Node.js入门

10-Node.js入门

01.什么是 Node.js 目标 什么是 Node.js&#xff0c;有什么用&#xff0c;为何能独立执行 JS 代码&#xff0c;演示安装和执行 JS 文件内代码 讲解 Node.js 是一个独立的 JavaScript 运行环境&#xff0c;能独立执行 JS 代码&#xff0c;因为这个特点&#xff0c;它可以用来…
阅读更多...
基于SpringBoot的精准扶贫管理系统

基于SpringBoot的精准扶贫管理系统

目录 前言 一、技术栈 二、系统功能介绍 用户信息管理 贫困户信息管理 新闻类型管理 志愿者招聘管理 志愿者招聘 留言反馈管理 贫困户 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息…
阅读更多...
c#设计模式-行为型模式 之 状态模式

c#设计模式-行为型模式 之 状态模式

&#x1f680;简介 状态模式是一种行为设计模式&#xff0c;它允许对象在其内部状态改变时改变其行为&#xff0c;我们可以通过创建一个状态接口和一些实现了该接口的状态类来实现状态模式。然后&#xff0c;我们可以创建一个上下文类&#xff0c;它会根据其当前的状态对象来改…
阅读更多...
CSS3实现动画加载效果

CSS3实现动画加载效果

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>加载效果</title><link rel"style…
阅读更多...
【Linux 安装Kibana 及 Es 分词器安装】

【Linux 安装Kibana 及 Es 分词器安装】

一、客户端Kibana安装 Kibana是一个开源分析和可视化平台&#xff0c;旨在与Elasticsearch协同工作。参考文档 1. 下载并解压缩Kibana 下载路径 选择的版本是和 ElasticSearch 对应&#xff08;7.17.3&#xff09; 下载后上传到Linux 系统中&#xff0c;并放在 /root/ 下&a…
阅读更多...
【机器学习】svm

【机器学习】svm

参考 sklearn中SVC中的参数说明与常用函数_sklearn svc参数-CSDN博客https://blog.csdn.net/transformed/article/details/90437821 参考PYthon 教你怎么选择SVM的核函数kernel及案例分析_clfsvm.svc(kernel)-CSDN博客https://blog.csdn.net/c1z2w3456789/article/details/10…
阅读更多...
75.颜色分类

75.颜色分类

原地排序&#xff1a;空间复杂度为1 class Solution { public:void sortColors(vector<int>& nums) {if(0){//法一&#xff1a;单指针两个遍历int nnums.size();int ptr0;for(int i0;i<n;i){if(nums[i]0){swap(nums[i],nums[ptr]);ptr;}}for(int iptr;i<n;i){…
阅读更多...
1.1了解python_python量化实用版教程(初级)

1.1了解python_python量化实用版教程(初级)

Python 特点 Python 安装和使用的编译器选择不展开。 Python 是一种高级编程语言&#xff0c;具有以下特点&#xff1a; - 简单易学&#xff1a;Python 语法简单&#xff0c;易于学习和理解。 - 开放源代码&#xff1a;Python 是开源的&#xff0c;可以免费使用&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023