当前位置：首页 > news >正文

【实操】2023年npm组件库的创建发布流程

news 2025/9/19 16:38:19

2022年的实践为基础，2023年我再建一个组件库【ZUI】。步骤回顾：

2022年的npm组件包的发布删除教程_npm i @ant-design/pro-components 怎么删除_啥咕啦呛的博客-CSDN博客

1.在gitee上创建一个项目,相信你是会的

2.创建初始化项目，看吧，时隔一年坑来了，截图为证：

提示很明确，node版本低了，使用nvm切换一下，之前有说过，nvm的安装使用

报错又来了

Command vue init requires a global addon to be installed.
Please run yarn global add @vue/cli-init and try again.

解决方法：npm install -g @vue/cli-init

额，算了自己初始化项目吧：

1.新建文件夹src及基础内容：

建文件夹assrts放图片资源，

放入图片zui.svg

建components放组件文件库，

在componets文件夹里新增一个zTag.vue文件，内容如下：

<script>export default {name: "zTag",props:{text:{type: String,default: 'Tag'},color:{type: String,default: '#1676FF'},bgColor:{type: String,default: '#e8f1ff'},borColor:{type: String,default: '#d0e4ff'},},render(h) {const { color, bgColor, borColor } = this;const classes = ['z-tag',];return h('span',{'class': classes,'style': { backgroundColor: bgColor,color: color,borderColor: borColor },domProps: {innerHTML: this.$slots.default[0].text},})}}
</script><style scoped>.z-tag{background-color: #e8f1ff;border-color: #d0e4ff;display: inline-block;height: 32px;padding: 0 10px;line-height: 30px;font-size: 12px;color: #1676FF;border-width: 1px;border-style: solid;border-radius: 4px;box-sizing: border-box;white-space: nowrap;}
</style>

建App.vue内容如下：

<template><div id="app"><img src="./assets/zui.svg" width="200px"><z-tag color="#E02020" bg-color="#e0202026" bor-color="#e0202033">标签</z-tag></div>
</template><script>
import zTag from './components/zTag'
export default {name: 'app',components: {zTag,},data () {return {}}
}
</script><style>
#app{text-align: center;
}
</style>

建index.js文件内容如下：

import zTag from './components/zTag'const components = [zTag, 
]
const install = function (Vue) {if (install.installed) return// 遍历注册全局组件components.map(component => Vue.component(component.name, component))// 这一步判断window.Vue是否存在，因为直接引用vue.min.js， 它会把Vue绑到Window上，我们直接引用打包好的js才能正常跑起来。if (typeof window !== 'undefined' && window.Vue) {install(window.Vue)}
}
export default install

建main.js内容如下：

import Vue from 'vue'
import App from './App.vue'import zTag from '../src/components/zTag'const components = [zTag, 
]
const install = function (Vue) {if (install.installed) return// 遍历注册全局组件components.map(component => Vue.component(component.name, component))// 这一步判断window.Vue是否存在，因为直接引用vue.min.js， 它会把Vue绑到Window上，我们直接引用打包好的js才能正常跑起来。if (typeof window !== 'undefined' && window.Vue) {install(window.Vue)}
}new Vue({el: '#app',render: h => h(App)
})
export default install;

2.新建index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>zui</title></head><body><div id="app"></div><script src="/dist/zui.js"></script></body>
</html>

3.新建package.json

{"name": "zui-vue2","description": "vue2.0 components","version": "0.0.1","author": "zhouzhenhan <1659725767@qq.com>","license": "MIT","private": false,"main": "dist/zui.js","scripts": {"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot","build": "cross-env NODE_ENV=production webpack --progress --hide-modules"},"dependencies": {"vue": "^2.5.11"},"browserslist": ["> 1%","last 2 versions","not ie <= 8"],"devDependencies": {"babel-core": "^6.26.0","babel-loader": "^7.1.2","babel-preset-env": "^1.6.0","babel-preset-stage-3": "^6.24.1","cross-env": "^5.0.5","css-loader": "^0.28.7","file-loader": "^1.1.4","vue-loader": "^13.0.5","vue-template-compiler": "^2.4.4","webpack": "^3.6.0","webpack-dev-server": "^2.9.1"}
}

4.新建webpack.config.js

var path = require("path");
var webpack = require("webpack");
const NODE_ENV = process.env.NODE_ENV;module.exports = {entry: NODE_ENV==='development'?"./src/main.js":"./src/index.js" ,output: {path: path.resolve(__dirname, "./dist"),publicPath: "/dist/",filename: "zui.js", // npm run build生成的文件名library: "zui", // 指定的就是你使用require时的模块名libraryTarget: "umd", // 指定输出格式// umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define},module: {rules: [{test: /\.css$/,use: ["vue-style-loader", "css-loader"]},{test: /\.vue$/,loader: "vue-loader",options: {loaders: {less: ["vue-style-loader", "css-loader", "less-loader"]}}},{test: /\.less$/,use: ["vue-style-loader", "css-loader", "less-loader"]},{test: /\.js$/,loader: "babel-loader",exclude: /node_modules/},{test: /\.(png|jpg|gif|svg)$/,loader: "file-loader",options: {name: "[name].[ext]?[hash]"}}]},resolve: {alias: {vue$: "vue/dist/vue.esm.js"},extensions: ["*", ".js", ".vue", ".json"]},devServer: {historyApiFallback: true,noInfo: true,overlay: true},performance: {hints: false},
};if (process.env.NODE_ENV === "production") {module.exports.plugins = (module.exports.plugins || []).concat([new webpack.DefinePlugin({"process.env": {NODE_ENV: '"production"'}}),new webpack.optimize.UglifyJsPlugin({sourceMap: false,compress: {warnings: false}}),new webpack.LoaderOptionsPlugin({minimize: true})]);
}

然后npm install,npm run dev ,npm run build.

看到运行后显示如下，代表成功了：

3.发布组件库

npm whoami 查看是否有npm登录

npm login 登录

输入name,输入passwod,然后输入邮箱，后续升级版本邮件都会有通知，最后输入邮箱的一次性密码。

登录成功后，就可以npm publish --otp=XXXXXX

可以看到发布成功！~

【实操】2023年npm组件库的创建发布流程

2022年的实践为基础，2023年我再建一个组件库【ZUI】。步骤回顾： 2022年的npm组件包的发布删除教程_npm i ant-design/pro-components 怎么删除_啥咕啦呛的博客-CSDN博客 1.在gitee上创建一个项目,相信你是会的 2.创建初始化项目，看吧&#…...

编程日记 2023/8/15 20:23:48

缓存设计的典型方案

缓存设计的典型方案在使用缓存系统的时候，还需要考虑缓存设计的问题，重点在于缓存失效时的处理和如何更新缓存。缓存失效是在使用缓存时不得不面对的问题。在业务开发中，缓存失效时由于找不到整个数据，一般会出于容错考虑&#…...

编程日记 2023/8/15 20:22:47

SQL笔记

最近的工作对SQL的应用程度较高，而且写的sql类型基本没怎么涉及过，把用到的几个关键字记录下。使用环境：达梦数据库达梦数据库有个特点，他有一个叫模式的说法，在图形化工具里直接点击创建查询窗口，不用像…...

编程日记 2023/8/15 20:21:45

UHPC的疲劳计算——兼论ModelCode2010的适用性

文章目录 0. 背景1、结论及概述2、MC10对于SN曲线的调整（囊括NC、HPC、UHPC）2.1 疲劳失效曲面的构建2.2 新模型的验证 3、MC10对于疲劳设计强度的调整及其背后的原因4. 结语 0. 背景今年年初，有一位用UHPC做混凝土塔筒的同行告诉我&#xf…...

编程日记 2023/8/15 20:20:44

关于elementui的input的autocomplete的使用

项目中需要实现搜索框搜索时能自动提示可选项的功能，elementui的input组件有已经封装好的el-autocomplete可以使用，但是在使用中发现一些问题，记录一下基础使用 // html部分 <el-autocompletev-model"name":fetch-suggestion…...

编程日记 2023/8/15 20:19:43

即然利用反射机制可以破坏单例模式，有什么方法避免呢？

私有构造方法中添加防止多次实例化的逻辑：在单例类的私有构造方法中，可以添加逻辑来检查是否已经存在实例，如果存在则抛出异常或返回已有的实例。这样即使通过反射创建了新的实例，也能在构造方法中进行拦截。使用枚举实现单例&a…...

编程日记 2023/8/15 20:18:42

【IDEA问题】下载不了源代码

引出问题最近不知道怎么打开 IDEA，本想查看源代码，然后点击下载源码，总是报找不到此对象的源代码。百度找了半天，GPT问了半天还是解决不了，直到遇到了这篇：idea中无法下载源码问题解决，终于得…...

编程日记 2023/8/15 20:17:41

代码随想录第四十八天

代码随想录第四十八天 Leetcode 198. 打家劫舍ILeetcode 213. 打家劫舍 IILeetcode 337. 打家劫舍 III Leetcode 198. 打家劫舍I 题目链接: 打家劫舍I 自己的思路:想不太出来递推公式！！！！ 正确思路:这个题主要是看是否偷第下标为…...

编程日记 2023/8/15 20:16:40

书写自动智慧：探索Python文本分类器的开发与应用：支持二分类、多分类、多标签分类、多层级分类和Kmeans聚类

书写自动智慧：探索Python文本分类器的开发与应用：支持二分类、多分类、多标签分类、多层级分类和Kmeans聚类文本分类器，提供多种文本分类和聚类算法，支持句子和文档级的文本分类任务，支持二分类、多分类、多标签分类…...

编程日记 2023/8/15 20:15:39

前端Webpack面试题

1.说说你对webpack的理解开发时，我们会使用框架 (React、Vue) ，ES6 模块化语法，Less/Sass 等 CSS 预处理器等语法进行开发，这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、CSS语法才能运行。所以我们需要打包工…...

编程日记 2023/8/15 20:14:37

LabVIEW使用边缘检测技术实现彩色图像隐写术

LabVIEW使用边缘检测技术实现彩色图像隐写术隐写术是隐藏信息的做法，以隐瞒通信的存在而闻名。该技术涉及在适当的载体（如图像，音频或视频）中插入秘密消息。在这些载体中，数字图像因其在互联网上的广泛使用而受到青睐…...

编程日记 2023/8/15 20:13:36

第一次参加计算机会议报告注意事项以及心得

计算机会议参会报告注意事项参会前参会中参会后参会心得注意事项接下来的会议注意事项分为：（1）参会前，（2）参会中，（3）参会后参会前参会前，一般被邀请…...

编程日记 2023/8/15 20:12:35

TypeScript教程（二）基础语法与基础类型

一、基础语法 TypeScript由以下几个部分组成 1.模块 2.函数 3.变量 4.语句和表达式 5.注释示例： Runoob.ts 文件代码： const hello : string "Hello World!" console.log(hello) 以上代码首先通过 tsc 命令编译： tsc …...

编程日记 2023/8/15 20:11:33

问道管理：网上如何打新股？

随着资本市场的不断敞开，越来越多的人开始重视股票市场，并想经过网上打新股来取得更大的出资收益。但是，网上打新股的办法并不简略，怎样才能成功地打新股呢？本文将从多个角度剖析，协助广阔出资者处理这一问…...

编程日记 2023/8/15 20:10:32

重磅更新，HertzBeat 集群版发布，易用友好的开源实时监控系统!

什么是 HertzBeat? HertzBeat 赫兹跳动是一个拥有强大自定义监控能力，高性能集群，无需 Agent 的开源实时监控告警系统。特点集监控告警通知为一体，支持对应用服务，数据库，操作系统，中间件&#xf…...

编程日记 2023/8/15 20:09:31

.NET6使用微信小程序授权登录,获取手机号

1.在appsettings配置你的小程序配置信息 //微信小程序信息配置"WechatConfig": {"appid": "", //小程序ID"secret": "" //小程序秘钥},2.请求接口时先获取Access_token #region 获取小程序的Access_tokenpublic object GetA…...

编程日记 2023/8/15 20:08:30

游戏类APP如何提升用户的活跃度？

移动游戏行业，追求使用率的营销能发挥强大的功效，可帮助减少玩家流失、追回流失的玩家、提高活跃玩家所带来的价值以及增加付费玩家贡献的收入。一、了解玩家需求想要提升玩家的活跃，首先要知道，玩家喜欢玩哪些平台的游戏&…...

编程日记 2023/8/15 20:07:28

【Sklearn】基于支持向量机算法的数据分类预测（Excel可直接替换数据）

【Sklearn】基于支持向量机算法的数据分类预测（Excel可直接替换数据） 1.模型原理1.1 数学模型1.2 模型原理2.模型参数3.文件结构4.Excel数据5.下载地址6.完整代码7.运行结果1.模型原理支持向量机（Support Vector Machine，SVM）是一种用于分类和回归的监督学习算法，其基本…...

编程日记 2023/8/15 20:06:26

抽象类与接口

一，类定义类部分与ES6用法基本一致。通过class定义类名，并通过constructor定义构造函数，通过super关键字来调用父类的方法。 class Person {name: string; // 属性constructor(name: string) { // 构造函数this.name name;}eat()…...

编程日记 2023/8/15 20:05:25

第三章，矩阵，09-线性方程组解的判断与求法、矩阵方程

第三章，矩阵，09-线性方程组解的判断与求法、矩阵方程定理推论1推论2推论3推论4 矩阵方程AXB解法解的存在性推论玩转线性代数(21)线性方程组解的判断与求法的笔记，相关证明以及例子见原文定理对n元线性方程组 A x b Axb Axb，…...

编程日记 2023/8/15 20:04:24

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性标准答案： 语义化标签： <header>：页头<nav>：导航<main>：主要内容<article>&#x…...

编程新知 2025/8/7 7:40:03

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载在Kubernetes（简称K8s）中，Ingress是一个API对象，它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress，你可…...

编程新知 2025/9/7 0:12:53

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统，智慧工地全套源码，java版智慧工地源码，支持PC端、大屏端、移动端。智慧工地聚焦建筑行业的市场需求，提供“平台网络终端”的整体解决方案，提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/9/19 5:54:45

什么是EULA和DPA

文章目录 EULA（End User License Agreement）DPA（Data Protection Agreement）一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA（End User License Agreement） 定义： EULA即…...

编程新知 2025/9/15 8:33:21

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2025/9/18 12:51:12

算法：模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣（LeetCode） 遍历字符串：通过外层循环逐一检查每个字符。遇到 ? 时处理： 内层循环遍历小写字母（a 到 z）。对每个字母检查是否满足： 与…...

编程新知 2025/9/3 20:40:45

C++.OpenGL （20/64）混合（Blending）

混合（Blending）透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2025/7/6 20:05:42

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2025/9/9 2:27:37

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的第一部分： 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

编程新知 2025/8/27 0:09:05

rknn toolkit2搭建和推理

安装Miniconda Miniconda - Anaconda Miniconda 选择一个新的版本 ，不用和RKNN的python版本保持一致使用 ./xxx.sh进行安装下面配置一下载源 # 清华大学源（最常用） conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...

编程新知 2025/9/7 8:46:40

1.在gitee上创建一个项目,相信你是会的

2.创建初始化项目，看吧，时隔一年坑来了，截图为证：

3.发布组件库

相关文章：