【实操】2023年npm组件库的创建发布流程
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.创建初始化项目，看吧&#…...
缓存设计的典型方案
缓存设计的典型方案 在使用缓存系统的时候，还需要考虑缓存设计的问题，重点在于缓存失效时的处理和如何更新缓存。 缓存失效是在使用缓存时不得不面对的问题。在业务开发中，缓存失效时由于找不到整个数据，一般会出于容错考虑&#…...
SQL笔记
最近的工作对SQL的应用程度较高，而且写的sql类型基本没怎么涉及过，把用到的几个关键字记录下。 使用环境：达梦数据库 达梦数据库有个特点，他有一个叫模式的说法，在图形化工具里直接点击创建查询窗口，不用像…...
UHPC的疲劳计算——兼论ModelCode2010的适用性
文章目录 0. 背景1、结论及概述2、MC10对于SN曲线的调整（囊括NC、HPC、UHPC）2.1 疲劳失效曲面的构建2.2 新模型的验证 3、MC10对于疲劳设计强度的调整及其背后的原因4. 结语 0. 背景 今年年初，有一位用UHPC做混凝土塔筒的同行告诉我…...
关于elementui的input的autocomplete的使用
项目中需要实现搜索框搜索时能自动提示可选项的功能，elementui的input组件有已经封装好的el-autocomplete可以使用，但是在使用中发现一些问题，记录一下 基础使用 // html部分 <el-autocompletev-model"name":fetch-suggestion…...
即然利用反射机制可以破坏单例模式，有什么方法避免呢？
私有构造方法中添加防止多次实例化的逻辑：在单例类的私有构造方法中，可以添加逻辑来检查是否已经存在实例，如果存在则抛出异常或返回已有的实例。这样即使通过反射创建了新的实例，也能在构造方法中进行拦截。 使用枚举实现单例&a…...
【IDEA问题】下载不了源代码
引出问题 最近不知道怎么打开 IDEA，本想查看源代码，然后点击下载源码，总是报找不到此对象的源代码。百度找了半天，GPT问了半天还是解决不了，直到遇到了这篇：idea中无法下载源码问题解决，终于得…...
代码随想录第四十八天
代码随想录第四十八天 Leetcode 198. 打家劫舍ILeetcode 213. 打家劫舍 IILeetcode 337. 打家劫舍 III Leetcode 198. 打家劫舍I 题目链接: 打家劫舍I 自己的思路:想不太出来递推公式！！！！ 正确思路:这个题主要是看是否偷第下标为…...
书写自动智慧：探索Python文本分类器的开发与应用：支持二分类、多分类、多标签分类、多层级分类和Kmeans聚类
书写自动智慧：探索Python文本分类器的开发与应用：支持二分类、多分类、多标签分类、多层级分类和Kmeans聚类 文本分类器，提供多种文本分类和聚类算法，支持句子和文档级的文本分类任务，支持二分类、多分类、多标签分类…...
前端Webpack面试题
1.说说你对webpack的理解 开发时，我们会使用框架 (React、Vue) ，ES6 模块化语法，Less/Sass 等 CSS 预处理器等语法进行开发，这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、CSS语法才能运行。所以我们需要打包工…...
LabVIEW使用边缘检测技术实现彩色图像隐写术
LabVIEW使用边缘检测技术实现彩色图像隐写术 隐写术是隐藏信息的做法，以隐瞒通信的存在而闻名。该技术涉及在适当的载体（如图像，音频或视频）中插入秘密消息。在这些载体中，数字图像因其在互联网上的广泛使用而受到青睐…...
第一次参加计算机会议报告注意事项以及心得
计算机会议参会报告 注意事项参会前参会中参会后 参会心得 注意事项 接下来的会议注意事项分为：（1）参会前，（2）参会中，（3）参会后 参会前 参会前，一般被邀请…...
TypeScript教程（二）基础语法与基础类型
一、基础语法 TypeScript由以下几个部分组成 1.模块 2.函数 3.变量 4.语句和表达式 5.注释 示例： Runoob.ts 文件代码： const hello : string "Hello World!" console.log(hello) 以上代码首先通过 tsc 命令编译： tsc …...
问道管理：网上如何打新股？
随着资本市场的不断敞开，越来越多的人开始重视股票市场，并想经过网上打新股来取得更大的出资收益。但是，网上打新股的办法并不简略，怎样才能成功地打新股呢？本文将从多个角度剖析，协助广阔出资者处理这一问…...
重磅更新，HertzBeat 集群版发布，易用友好的开源实时监控系统!
什么是 HertzBeat? HertzBeat 赫兹跳动 是一个拥有强大自定义监控能力，高性能集群，无需 Agent 的开源实时监控告警系统。 特点 集 监控告警通知 为一体，支持对应用服务，数据库，操作系统，中间件…...
.NET6使用微信小程序授权登录,获取手机号
1.在appsettings配置你的小程序配置信息 //微信小程序信息配置"WechatConfig": {"appid": "", //小程序ID"secret": "" //小程序秘钥},2.请求接口时先获取Access_token #region 获取小程序的Access_tokenpublic object GetA…...
游戏类APP如何提升用户的活跃度？
移动游戏行业，追求使用率的营销能发挥强大的功效，可帮助减少玩家流失、追回流失的玩家、提高活跃玩家所带来的价值以及增加付费玩家贡献的收入。 一、了解玩家需求 想要提升玩家的活跃，首先要知道，玩家喜欢玩哪些平台的游戏&…...
【Sklearn】基于支持向量机算法的数据分类预测（Excel可直接替换数据）
【Sklearn】基于支持向量机算法的数据分类预测（Excel可直接替换数据） 1.模型原理1.1 数学模型1.2 模型原理2.模型参数3.文件结构4.Excel数据5.下载地址6.完整代码7.运行结果1.模型原理 支持向量机（Support Vector Machine，SVM）是一种用于分类和回归的监督学习算法，其基本…...
抽象类与接口
一，类 定义类 部分与ES6用法基本一致。通过class定义类名，并通过constructor定义构造函数，通过super关键字来调用父类的方法。 class Person {name: string; // 属性constructor(name: string) { // 构造函数this.name name;}eat()…...
第三章，矩阵，09-线性方程组解的判断与求法、矩阵方程
第三章，矩阵，09-线性方程组解的判断与求法、矩阵方程 定理推论1推论2推论3推论4 矩阵方程AXB解法解的存在性推论 玩转线性代数(21)线性方程组解的判断与求法的笔记，相关证明以及例子见原文 定理 对n元线性方程组 A x b Axb Axb，…...
突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合
强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能，包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件： 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）
文章目录 1.什么是Redis？2.为什么要使用redis作为mysql的缓存？3.什么是缓存雪崩、缓存穿透、缓存击穿？3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...
深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析：跨文件编程的终极指南 📅 更新时间：2025年6月5日 🏷️ 标签：C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么？&…...
安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲
文章目录 前言第一部分：体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分：体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
PHP 8.5 即将发布：管道操作符、强力调试
前不久，PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5！作为 PHP 语言的又一次重要迭代，PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是，借助强大的本地开发环境 ServBay&am…...
论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing
Muffin 论文 现有方法 CRADLE 和 LEMON，依赖模型推理阶段输出进行差分测试，但在训练阶段是不可行的，因为训练阶段直到最后才有固定输出，中间过程是不断变化的。API 库覆盖低，因为各个 API 都是在各种具体场景下使用。…...
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...