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

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

news 2026/2/9 20:39:02

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

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

编程新知 2026/1/24 13:05:24

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/11/18 0:32:13

工程地质软件市场：发展现状、趋势与策略建议

一、引言在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/10/6 6:10:29

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录问题现象问题原因解决办法问题现象 macOS启动台（Launchpad）多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。问题原因很明显，都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/12/4 19:00:05

3.8 记事本项目总结项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2026/2/1 6:56:36