使用npm发布自己的组件库

在日常开发中,我们习惯性的会封装一些个性化的组件以适配各种业务场景,突发奇想能不能建一个自己的组件库,今后在各种业务里可以自由下载安装自己的组件。

一. 项目搭建

首先直接使用vue-cli创建一个vue2版本的项目,并下载好elementui,这里我们会尝试封装一个适配上万数据的下拉框组件。

二. 组件准备工作

项目搭建完成后我的目录结构大概是这样的
在这里插入图片描述
通常人们喜欢新建一个packages文件夹专门存放组件,例如我们熟悉的element-ui就是如此,但这里我想了想我本身就有一个components文件夹了,干脆就直接使用这个文件夹做我的组件文件夹了,没必要专门单独新建一个。

这里我们需要建一个index.js文件用于组件的注册操作,以下是文件内容

let components = []
const requireAll = require.context("@/components", true, /index\.vue$/)
const modulList = requireAll.keys().map((item) => requireAll(item))
modulList.forEach(({ default: vm }) => {components.push(vm)
})// 全局引入
const install = function (Vue) {// 遍历组件列表并注册全局组件components.forEach((component) => {//component.name 此处使用到组件vue文件中的 name 属性Vue.component("Cl" + component.name, component)})
}let exportData = {install,
}// 适配单个引入
components.forEach((component) => {component.install = function (Vue) {Vue.component("Cl" + component.name, component)}exportData[component.name] = component
})export default exportData

简单说下上面的代码

  1. 首先我们创建了一个components数组用来存放我们获取的组件。
  2. 获取组件的方法使用了webpack自带的一写api,可以直接访问到我们指定的文件夹,然后正则匹配出我们需要的组件文件。
  3. 然后写一个install方法用于组件的批量全局注册。
  4. 接着我们map下这个components将所有的组件分别构建一个install方法,这样的话我们就可以拥有全局引用和按需引用两种引用模式了。注意这里按需导入并不能像element-ui那样直接import { Button } from “element-ui”,element-ui可以这样写是因为他使用了babel-plugin-component 插件,可以根据你提供的关键字比如Button去指定文件直接读取,我们要按需导入的话据需要
    import toolsUi from "element-ui"
    Vue.use(toolsUi.组件名称)
    
  5. 最后我们将所有数据直接导出。

三. 构建出发布的包

然后我们需要在package.json里面配置下我们的打包命令,这里我是这样写的

"npmUp": "vue-cli-service build --target lib ./src/components/index.js --name tools_ui --dest tools_ui"
  • vue-cli-service build :对指定文件夹进行打包
  • --target lib:指定构建的目标为库(library)。这将使构建工具以库模式进行构建,生成一个可供他人使用的组件库。
  • ./src/components/index.js:指定入口文件路径。这是你组件库的主要入口文件。
  • --name tools_ui:指定组件库的名称。你的组件库将以 tools_ui 为名称进行构建和导出。
  • --dest tools_ui:指定构建输出的目录。生成的组件库将被输出到名为 tools_ui 的目录中。

然后我们直接执行命令:npm run npmUp

这个时候我们就可以看到我们打包出来的文件夹了
在这里插入图片描述

四. 发布工作

我们在终端cd进入到我们的tools-ui下,然后npm init -y来初始化一个新的 package.json文件,在这个文件里面配置出我们的包信息,例如版本,名称等。然后我们使用npm adduser进行登录操作(一般会校验用户名,密码等),前提是已经在npm上有自己的账号。最后我们使用npm publish进行发布操作。

注意第一次发布而可能会遇到大大小小的问题,例如node版本,npm版本问题,npm登录问题,包名称重复等问题,需要具体问题具体分析,一般他会有对应的提示。

五 使用组件库

我们可以直接npm i 发布库的名称进行下载操作。然后在main.js里面直接引入

import tools_ui from "@code_life/tools_ui"
Vue.use(tools_ui)

当然我们也可以按需加载

import tools_ui from "@code_life/tools_ui"
Vue.use(tools_ui.MuchSelect)

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

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

相关文章

Ps:陷印

在准备图像进行专业印刷之前,陷印 Trap是一个重要的步骤。 在彩色印刷中,多种颜色的墨水通常分别印刷。陷印是一种叠印技术,它可避免打印时印版的微小偏差或移动而使打印图像出现微小的缝隙。 进行陷印处理以纠正未对齐现象 A. 未对齐现象&am…

代码逻辑修复与其他爬虫ip库的应用

在一个项目中,由于需要设置 http_proxy 来爬虫IP访问网络,但在使用 requests 库下载文件时遇到了问题。具体表现为在执行 Python 脚本时,程序会阻塞并最终超时,无法正常完成文件下载。 解决方案 针对这个问题,我们可以…

VB.net读写S50/F08IC卡,修改卡片密码控制位源码

本示例使用设备:Android Linux RFID读写器NFC发卡器WEB可编程NDEF文本/智能海报/-淘宝网 (taobao.com) 函数声明 Module Module1读卡函数声明Public Declare Function piccreadex Lib "OUR_MIFARE.dll" (ByVal ctrlword As Byte, ByRef serial As Byte, …

基于单片机K型热电偶温度采集报警系统

**单片机设计介绍, 基于单片机K型热电偶温度采集报警系统 文章目录 一 概要简介系统特点系统组成工作原理应用领域 二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 # 基于单片机K型热电偶温度采集报警系统介绍 简介 该系统是基于单片…

【论文阅读笔记】Deep learning for time series classification: a review

【论文阅读笔记】Deep learning for time series classification: a review 摘要 在这篇文章中,作者通过对TSC的最新DNN架构进行实证研究,探讨了深度学习算法在TSC中的当前最新性能。文章提供了对DNNs在TSC的统一分类体系下在各种时间序列领域中的最成功…

8 Redis与Lua

LUA脚本语言是C开发的,类似存储过程,是为了实现完整的原子性操作,可以用来补充redis弱事务的缺点. 1、LUA脚本的好处 2、Lua脚本限流实战 支持分布式 import org.springframework.core.io.ClassPathResource; import org.springframework.data.redis…

Excel 文件比较工具 xlCompare 11.01 Crack

比较两个 Excel 文件之间的差异 xlCompare. xlCompare.com 是性能最佳的 Excel diff 工具,用于比较两个 Excel 文件或工作表并在线突出显示差异。xlCompare 包括免费的在线 Excel 和 CSV 文件比较服务以及用于比较和合并 Excel 文件的强大桌面工具。如果您想在线了…

软件测试: 测试用例

一. 软件测试四要素 测试环境,操作步骤,测试数据,预期结果 二. 基于需求进行测试用例的设计 基于需求设计测试用例是测试设计和开发测试用例的基础,第一步就要分析测试需求,验证需求是否正确,完整,无二义性,并且逻辑自洽.在需求正确的基础上细化测试需求,从测试需求提炼出一…

React整理总结(五、Redux)

1.Redux核心概念 纯函数 确定的输入,一定会产生确定的输出;函数在执行过程中,不能产生副作用 store 存储数据 action 更改数据 reducer 连接store和action的纯函数 将传入的state和action结合,生成一个新的state dispatc…

猫12分类:使用yolov5训练检测模型

前言: 在使用yolov5之前,尝试过到百度飞桨平台(小白不建议)、AutoDL平台(这个比较友好,经济实惠)训练模型。但还是没有本地训练模型来的舒服。因此远程了一台学校电脑来搭建自己的检测模型。配置…

hdfsClient_java对hdfs进行上传、下载、删除、移动、打印文件信息尚硅谷大海哥

Java可以通过Hadoop提供的HDFS Java API来控制HDFS。通过HDFS Java API,可以实现对HDFS的文件操作,包括文件的创建、读取、写入、删除等操作。 具体来说,Java可以通过HDFS Java API来创建一个HDFS文件系统对象,然后使用该对象来进…

集合的自反关系和对称关系

集合的自反关系和对称关系 一:集合的自反关系1:原理:2:代码实现 二:对称关系1:原理:2:代码实现 三:总结 一:集合的自反关系 1:原理: …

【python】直方图正则化详解和示例

直方图正则化(Histogram Normalization)是一种图像增强技术,目的是改变图像的直方图以改善图像的质量。具体来说,它通过将图像的直方图调整为指定的形状,以增强图像的对比度和亮度。 直方图正则化的基本步骤如下&…

【Android Jetpack】Hilt的理解与浅析

文章目录 依赖注入DaggerHiltKoin添加依赖项Hilt常用注解的含义HiltAndroidAppAndroidEntryPointInjectModuleInstallInProvidesEntryPoint Hilt组件生命周期和作用域如何使用 Hilt 进行依赖注入 本文只是进行了简单入门,博客仅当做笔记用。 依赖注入 依赖注入是一…

某60区块链安全之不安全的随机数实战二学习记录

区块链安全 文章目录 区块链安全不安全的随机数实战二实验目的实验环境实验工具实验原理实验内容EXP利用 不安全的随机数实战二 实验目的 学会使用python3的web3模块 学会以太坊不安全的随机数漏洞分析及利用 实验环境 Ubuntu18.04操作机 实验工具 python3 实验原理 由…

吴恩达《机器学习》9-1:代价函数

一、引入新标记方法 首先,引入一些新的标记方法,以便更好地讨论神经网络的代价函数。考虑神经网络的训练样本,其中每个样本包含输入 x 和输出信号 y。我们用 L 表示神经网络的层数,表示每层的神经元个数(表示输出层神…

基于单片机GPS轨迹定位和里程统计系统

**单片机设计介绍, 基于单片机GPS轨迹定位和里程统计系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 一个基于单片机、GPS和里程计的轨迹定位和里程统计系统可以被设计成能够在移动的交通工具中精确定位车辆的位置…

Spring Boot - 自定义注解来记录访问路径以及访问信息,并将记录存储到MySQL

1、准备阶段 application.properties&#xff1b;yml 可通过yaml<互转>properties spring.datasource.urljdbc:mysql://localhost:3306/study_annotate spring.datasource.usernameroot spring.datasource.password123321 spring.datasource.driver-class-namecom.mysq…

【论文阅读】MAG:一种用于航天器遥测数据中有效异常检测的新方法

文章目录 摘要1 引言2 问题描述3 拟议框架4 所提出方法的细节A.数据预处理B.变量相关分析C.MAG模型D.异常分数 5 实验A.数据集和性能指标B.实验设置与平台C.结果和比较 6 结论 摘要 异常检测是保证航天器稳定性的关键。在航天器运行过程中&#xff0c;传感器和控制器产生大量周…

苹果CMS首涂第30套可装修DIY主题模板免授权版

这是一款可以装修的主题&#xff0c;类似淘宝店装修一样&#xff0c;可以针对首页、栏目页、详情页、播放页进行自定义装修&#xff0c;内置10个模块自由选择、添加、修改、删除、排序操作&#xff0c;后续升级还会增加更多实用和个性模块供选择&#xff0c;主题内包含的导航、…