从0开始搭建、上传npm包
从0开始搭建、上传npm包
- 1、上传一个简单获取水果价格的包
- 创建 `vite` 项目
- 在项目根目录 `src` 文件夹中创建 `index.ts` 文件,文件内容如下:
- 在 `main.ts` 文件中导入、导出上面创建的方法
- 创建 `vite.config.ts` 配置文件,文件内容如下
- 配置 `package.json` 文件,文件内容如下
- 添加 `README.md` 项目说明文件
- 打包项目
- 注册 `npm` 账号
- 项目中使用包
- 修改 `npm` 包内容方法
- 2、上传一个简单组件
- 创建 `vite` 项目
- 创建自定义组件
- 创建对应 `index.ts` 文件,文件内容如下:
- 配置 `vite.config.ts` 文件,文件内容如下:
- 打包发布
- 在页面中使用组件
1、上传一个简单获取水果价格的包
创建 vite 项目
npm create vite



在项目根目录 src 文件夹中创建 index.ts 文件,文件内容如下:
/*** 获取水果价格的方法* @param name 水果名称* @returns*/
export const getPrice = (name: string) => {let price: number = 0.0;switch (name) {case "苹果":price = 9.99;break;case "香蕉":price = 7.89;break;case "梨":price = 6.65;break;case "榴莲":price = 9.65;break;case "菠萝":price = 5.42;break;default:throw new Error("未匹配到水果价格,请重新录入");}return price;
};
在 main.ts 文件中导入、导出上面创建的方法
import { getPrice } from "./index";export { getPrice };
创建 vite.config.ts 配置文件,文件内容如下
import { defineConfig } from "vite";
export default defineConfig({build: {outDir: "dist", // 自定义构建输出目录target: "es2020",lib: {entry: "src/main.ts", // 入口文件路径formats: ["es", "cjs"],},},
});
配置 package.json 文件,文件内容如下
{"name": "bagen-getPrice","private": false,"version": "1.0.1","type": "module","main": "dist/bagen-getPrice.cjs","module": "dist/bagen-getPrice.js","scripts": {"serve": "vite","build": "tsc && vite build","preview": "vite preview"},"devDependencies": {"typescript": "^5.2.2","vite": "^5.0.8"}
}
添加 README.md 项目说明文件
打包项目
npm run build
注册 npm 账号
- 官网
- 配置
npm源,在项目根目录中运行以下代码
npm config set registry https://registry.npmjs.org
- 登录
npm
输入:姓名 和 邮箱
npm login
- 发布
npm publish

项目中使用包
- 安装包
npm install bagen-getPrice -S
- 页面中使用
import { getPrice } from 'bagen-getPrice'getPrice('苹果')
修改 npm 包内容方法
- 安装包
npm install bagen-getPrice -S
- 修改代码
- 代码在
node_modules文件夹中 - 在
package.json文件中更新版本号 - 在自己包目录中运行如下代码:
npm publish
2、上传一个简单组件
创建 vite 项目
npm create vite
创建自定义组件

<template><input type="text" v-model="keyword" @keydown.enter="searchPriceHandle" /><br />{{ keyword }} {{ price }}
</template><script setup lang="ts">
import { ref } from "vue";
const keyword = ref<string>("");
const price = ref<string | number>("");/*** 查询价格方法*/
const searchPriceHandle = () => {switch (keyword.value) {case "苹果":price.value = 9.98;break;case "香蕉":price.value = 8.88;break;case "菠萝":price.value = 6.48;break;case "梨":price.value = 9.78;break;default:price.value = 0.0;throw new Error("未匹配到水果名称,请重新输入");}
};
</script><style lang="scss" scoped></style>
创建对应 index.ts 文件,文件内容如下:
components ->index.ts
import { App } from "vue";
import custom from "./custom.vue";const install = (app: App<Element>) => {app.component("Bg-Custom", custom);
};export default {install,
};
配置 vite.config.ts 文件,文件内容如下:
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";export default defineConfig({plugins: [vue()],build: {outDir: "dist", // 自定义构建输出目录target: "es2020",lib: {entry: "src/components/index.ts", // 入口哦文件路径name: "bg-get-price", // 暴漏的全局变量(最好把名称都统一)fileName: "bg-get-price", // 输出的包文件名,默认取 package.json 的 name},rollupOptions: {// 确保外部化处理那些你不想打包进库的依赖external: ["vue"],output: {// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量globals: {vue: "Vue",},},},},
});
打包发布
打包发布过程同上
在页面中使用组件
- 安装包
npm install bg-get-price -S
- 注册,
main.ts文件中注册,代码如下:
import bgGetPrice from "bg-get-price";
// 注册,重点
app.use(bgGetPrice)
- 引用
<bg-get-price></bg-get-price>
必须打包上传时候的名称一致
相关文章:
从0开始搭建、上传npm包
从0开始搭建、上传npm包 1、上传一个简单获取水果价格的包创建 vite 项目在项目根目录 src 文件夹中创建 index.ts 文件,文件内容如下:在 main.ts 文件中导入、导出上面创建的方法创建 vite.config.ts 配置文件,文件内容如下配置 package.jso…...
【Go】在 JSON 中解析 time.Duration
当解析 JSON 时,使用time.Duration可能是一个繁琐的过程,因为它需要在一秒的后面添加 9 个零(即 1000000000)。为了简化这个过程,我创建了一个名为 Duration 的新类型: type Duration time.Duration为了将…...
UE4 C++ UGameInstance实例化
1.创建GameInstance C类 2.在.h添加变量 class 工程名称_API UMyGameInstance : public UGameInstance {GENERATED_BODY()public: //定义了三个公开的变量UMyGameInstance();UPROPERTY(EditAnywhere, BlueprintReadWrite, Category "MyGameInstance")FString Name…...
在工业制造方面,如何更好地实现数字化转型?
实现工业制造的数字化转型涉及利用数字技术来增强流程、提高效率并推动创新。以下是工业制造领域更好实现数字化转型的几个关键步骤: 1.定义明确的目标: 清楚地概述您的数字化转型目标。确定需要改进的领域,例如运营效率、产品质量或供应链…...
【MySQL】-10 MySQL 存储过程
MySQL 存储过程 优点缺点一、存储过程的创建和调用创建存储过程实例1、in 输入参数2、out输出参数3、inout输入参数 三、变量1. 变量定义2. 变量赋值3. 用户变量 四、注释MySQL存储过程的调用MySQL存储过程的查询MySQL存储过程的修改MySQL存储过程的删除MySQL存储过程的控制语句…...
3.闭包 - JS
作用域 一般认为 JS 中作用域有三种: 全局作用域:一个脚本运行代码的默认作用域;模块作用域:一个模块运行代码的默认作用域;函数作用域:一个函数运行代码的默认作用域。 而由于 let/const 声明变量的作用…...
Java实现批量视频抽帧2.0
继上个版本 对其进行略微升级 🤓 上个版本仅对一个视频进行抽帧处理 此版本可对一个文件夹内的全部视频进行抽帧并对应的文件夹进行帧图片的保存 1️⃣配置pom.xml (保持上次不变) <dependencies><dependency><grou…...
MFC 原生LsitCtrl单元格嵌入图标
// ListItemInsertIconDlg.h: 头文件 //#pragma once// CListItemInsertIconDlg 对话框 class CListItemInsertIconDlg : public CDialogEx { // 构造 public:CListItemInsertIconDlg(CWnd* pParent nullptr); // 标准构造函数// 对话框数据 #ifdef AFX_DESIGN_TIMEenum { IDD…...
黑马头条 - minio
我是南城余!阿里云开发者平台专家博士证书获得者! 欢迎关注我的博客!一同成长! 一名从事运维开发的worker,记录分享学习。 专注于AI,运维开发,windows Linux 系统领域的分享! 知…...
认识Tomcat (一)
认识Tomcat (一) 一、服务器 1.1 服务器简介 硬件服务器的构成与一般的PC比较相似,但是服务器在稳定性、安全性、性能等方面都要求更高,因为CPU、芯片组、内存、磁盘系统、网络等硬件和普通PC有所不同。 软件服务器&…...
SSH免密切换服务器案例-ssh协议(公钥和私钥)
公钥和私钥理解 公钥提供加密,私钥解密,公钥可以共享,私钥不可以。举例公钥相当于锁头,可以给别人用,钥匙相当于私钥,只能开自己发出去的锁头,也就是私钥和公钥成对,私钥只能解密对…...
AMH面板如何安装与公网远程访问本地面板界面
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
【教3妹学编程-算法题】1696. 跳跃游戏 VI
3妹:好冷啊, 冻得瑟瑟发抖啦 2哥 : 没想到都立春了还这么冷啊~ 3妹:暴雪、冻雨、大雨,这天气还让不让人活啦!!! 2哥 :哎,好多人都滞留的高铁站了,没法回家了 3妹…...
解决C#中无限递归导致的System.StackOverflowException异常
目录 背景: 错误示例分析: 为什么是错误的? 正确的使用递归: 修改后的代码: 原理和原因: 结论: 背景: 在软件开发中,递归是一种常见的编程技术,它允许方法调用自…...
ASP.NET Core 预防开放式重定向攻击
写在前面 为预防钓鱼网站的常用套路,在进行 Web 应用程序的开发时,原则上应该将所有由用户提交的数据视为不可信。如果应用程序中包含了基于 URL 内容重定向的功能,需要确保这种类型的重定向操作只能在应用本地完成,或者明确判断…...
HashCat 恢复Excel、Word、PPT密码保姆教程
HashCat 恢复Excel、Word、PPT密码 一、流程 整体需要两个步骤 先用office2john.py获取下文件的hash值 python office2john.py 1.xlsx > hash这个命令需要你电脑有python环境,然后在cmd命令窗口中执行此命令就行 文件链接:https://github.com/magnu…...
flink实战--flink的job_listener使用解析
背景 生产环境可能有如下的需求:当一个flink作业提交完成或者是运行中不定时给我们触发某个接口或发送一个消息,然后我们在做其他的操作,尤其是batch作业。 flink的job_listener就可以满足我们监听flink任务提交和运行状态的需求,具体如何使用本文将全面介绍一下。 注册入…...
ASR 概述
前言 随着企业加强了与客户的线上沟通,企业越发依赖于虚拟助手、聊天机器人以及其他的语音技术,以实现与客户的高效互动。这几类人工智能,都是依赖于自动语音识别技术,简称为 ASR。ASR 涉及到将语音转换为文本,促使计…...
聊聊比特币----比特币地址
⽐特币地址是⼀个标识符(帐号),包含27-34个字母数字拉丁字符(0,O,I除外)。地址可以以QR码形式表⽰,是匿名的,不包含关于所有者的信息。 地址⽰例:14qViLJfdG…...
(4)【Python数据分析进阶】Machine-Learning模型与算法应用-回归、分类模型汇总
线性回归、逻辑回归算法应用请参考: https://codeknight.blog.csdn.net/article/details/135693621https://codeknight.blog.csdn.net/article/details/135693621本篇主要介绍决策树、随机森林、KNN、SVM、Bayes等有监督算法以及无监督的聚类算法和应用PCA对数据进行降维的算法…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
解锁数据库简洁之道:FastAPI与SQLModel实战指南
在构建现代Web应用程序时,与数据库的交互无疑是核心环节。虽然传统的数据库操作方式(如直接编写SQL语句与psycopg2交互)赋予了我们精细的控制权,但在面对日益复杂的业务逻辑和快速迭代的需求时,这种方式的开发效率和可…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store: 我们在使用异步的时候理应是要使用中间件的,但是configureStore 已经自动集成了 redux-thunk,注意action里面要返回函数 import { configureS…...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时,性能会显著下降。以下是优化思路和简易实现方法: 一、核心优化思路 减少 JOIN 数量 数据冗余:添加必要的冗余字段(如订单表直接存储用户名)合并表:将频繁关联的小表合并成…...
CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为:一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...
Qemu arm操作系统开发环境
使用qemu虚拟arm硬件比较合适。 步骤如下: 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载,下载地址:https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...
