【实操】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，…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目：3442. 奇偶频次间的最大差值 I 思路 ：哈希，时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况，哈希表这里用数组即可实现。 C版本： class Solution { public:int maxDifference(string s) {int a[26]…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候，写过一篇简单实现，后期随着对该模型的深入研究，本次记录涉及到prophet 的公式以及参数调优，从公式可以更直观…...
Python爬虫（二）：爬虫完整流程
爬虫完整流程详解（7大核心步骤实战技巧） 一、爬虫完整工作流程 以下是爬虫开发的完整流程，我将结合具体技术点和实战经验展开说明： 1. 目标分析与前期准备 网站技术分析： 使用浏览器开发者工具（F12&…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）
笔记整理：刘治强，浙江大学硕士生，研究方向为知识图谱表示学习，大语言模型 论文链接：http://arxiv.org/abs/2407.16127 发表会议：ISWC 2024 1. 动机 传统的知识图谱补全（KGC）模型通过…...
Python爬虫（一）：爬虫伪装
一、网站防爬机制概述 在当今互联网环境中，具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类： 身份验证机制：直接将未经授权的爬虫阻挡在外反爬技术体系：通过各种技术手段增加爬虫获取数据的难度…...
NLP学习路线图（二十三）：长短期记忆网络（LSTM）
在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章，二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑： 🔄 一、起源与初创期：Swagger的诞生（2010-2014） 核心…...
【Oracle】分区表
个人主页：Guiat 归属专栏：Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享 文件木马：https://w…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...