向npm发布自己写的vue组件,使用vite创建项目

向npm发布自己写的vue组件,使用vite创建项目

创建项目

pnpm create vite

输入项目名称
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

由于我的组件是基于 ant-design-vue和vue的,需要解析.vue文件,我又安装了下面4个。

然后执行 pnpm i安装依赖

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({plugins: [vue(),],build: {lib: {entry: './lib/main.ts',name: 'aixiaodou-ui', // 需要和你的项目名称一致fileName: 'aixiaodou-ui'// 需要和你的项目名称一致},rollupOptions:{external:['vue'],output:{format:'umd',exports:'named',globals:{vue:'Vue'},},},minify:'terser',terserOptions: {compress: {drop_console: true, // 生产环境下去除consoledrop_debugger: true, // 生产环境下去除debugger}}}
})

package.json

{"name": "aixiaodou-ui","private": false, // 设置为false"version": "0.0.5", // 版本号,每次推送需加1,不能和已推送的相同"type": "module","files": [ // 设置要推送的文件,我把源码lib也推送了"dist","index.d.ts","lib"],"main": "./dist/aixiaodou-ui.umd.cjs", // 需要和你的项目名称一致"module": "./dist/aixiaodou-ui.js", // 需要和你的项目名称一致"types": "./index.d.ts","exports": {"types": "./index.d.ts","import": "./dist/aixiaodou-ui.js", // 需要和你的项目名称一致"require": "./dist/aixiaodou-ui.umd.cjs" // 需要和你的项目名称一致},"scripts": {"dev": "vite","build": "tsc && vite build"},"devDependencies": {"@vitejs/plugin-vue": "^5.0.4","terser": "^5.31.0","typescript": "^5.4.5","vite": "^5.2.10"},"dependencies": {"@ant-design/icons-vue": "^7.0.1","ant-design-vue": "^4.2.1","vue": "^3.4.27"}
}

修改 index.d.ts

利于编译器提示
在这里插入图片描述

打包构建

构建成功后会生成dist目录

pnpm build

登录npm

登录注册账号 https://www.npmjs.com/

设置 npm源

也可以使用nrm切换

npm config set registry=https://registry.npmjs.org

登录npm

npm login

根据提示,输入用户名,输入密码 进行登录

发布

npm publish

发布成功后可以在npm网站内看到
在这里插入图片描述

发布成功后就可以使用npm命令进行安装使用了
npm i -S aixiaodou-ui

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/14932.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

防范TOCTOU竞态条件攻击

防范TOCTOU竞态条件攻击 在软件开发过程中,我们常常会遇到需要在使用资源之前检查其状态的情况。然而,如果资源的状态在检查和使用之间发生了变化,那么检查的结果可能会失效,导致软件在资源处于非正常状态时执行无效操作。这种时…

[datawhale202405]从零手搓大模型实战:TinyAgent

结论速递 TinyAgent项目实现了一个简单的Agent智能体,主要是实现了ReAct策略(推理调用工具的能力),及封装了一个Tool。 项目实现有一定的疏漏。为了正确运行代码,本次对代码Agent部分进行了简单修改(完善…

windows安装rocketmq

1.下载连接 https://rocketmq.apache.org/download/ 2.解压到D盘下(其他位置也可以) 3.配置环境变量 需要有jdk环境 新建ROCKETMQ_HOME,刚刚解压的位置 编辑Path,新增%ROCKETMQ_HOME%\bin 4.启动mqnameserver 进入安装bin目录下…

ERC314协议

314协议功能详解 这两天花时间研究了一下314协议,总体感觉还不错,有创新。 功能亮点 314协议作为一种创新的代币标准,致力于降低用户交易成本与简化授权流程,通过“转账即交易”模式革新传统Swap体验。此协议简化了买卖代币的过程…

什么是react

React 是一个用于构建用户界面的 JavaScript 库,由 Facebook(现在的 Meta)开发和维护。它首次发布于2013年,并迅速成为最受欢迎的前端库之一。React 的主要目标是提供一种高效、灵活的方式来构建用户界面,特别是在大型…

gc和gccgo编译器

Go 语言有两个主要的编译器,分别是 Go 编译器(通常简称为 gc)和 GCCGO。它们之间有一些重要的异同点: gc 编译器: gc 是 Go 语言的官方编译器,由 Go 语言的开发团队维护。它是 Go 语言最常用的编译器&#…

PHP代码审计前期准备

1 php代码审计的意义 1.1 什么是代码审计 就是获取目标的代码,这个目标可以是一个网站,也可以是一个手机app 1.2 黑盒测试与白盒测试的区别 在代码审计中黑盒和白盒的主要区别就在于是否可以拿到源代码,黑盒是拿不到源代码的,…

交叉编译——

什么是交叉编译 交叉编译 是在一个平台上生成临海一个平台可执行代码. eg.在windows上面编写C51代码,并编译生成可执行代码。如xx.hex 我们在Ubuntu上编写树莓派的代码,并编译成可执行代码。a.out. 是在树莓派上运行,不在Ubuntu Linux上面运…

便携式iv测试仪特点

TH-PV30便携式IV测试仪是一种用于测量半导体器件电学特性的设备,它具有体积小、重量轻、便于携带等特点,广泛应用于半导体行业、科研实验室以及教育领域。 该测试仪的工作原理基于四探针法,通过在半导体器件表面放置四个金属探针&#xff0c…

【vs2022】安装copilot和reshaper

直接安装新版vs 17.10 自带集成的copilot支持安装resharper 可以跳过市场里的reshper安装好后依然可以直接使用vs。 resharper 2024.1.2 市场里还是i老版本: copilot 不兼容,这个是之前市场安装的版本 官方建议用vs intall 安装 安裝 GitHub Copilot GitHub.Co…

详解http协议

什么是HTTP协议 定义 Http协议即超文本传送协议 (HTTP-Hypertext transfer protocol) 。 它定义了浏览器(即万维网客户进程)怎样向万维网服务器请求万维网文档,以及服务器怎样把文档传送给浏览器。从层次的角度看,HTTP是面向&am…

第四十一天 | 62.不同路径 63.不同路径|| 343.整数拆分 96.不同的二叉搜索树

题目:62.不同路径 1.二维dp数组dp[i][j]含义:到达(i,j)位置有dp[i][j]种方法。 2.动态转移方程:dp[i][j] dp[i - 1][j] dp[i][j - 1] 3.初始化:dp[0][j] 1, dp[i][0] 1 (第一…

Vue3设置缓存:storage.ts

在vue文件使用: import { Local,Session } from //utils/storage; // Local if (!Local.get(字段名)) Local.set(字段名, 字段的值);// Session Session.getToken()storage.ts文件: import Cookies from js-cookie;/*** window.localStorage 浏览器永…

uniapp 安卓 Pc端真机浏览器调试

下载插件:真机模拟浏览器 1. 安装, 每次启用时使用usb 线连接电脑, 并且打开手机或者POS (调试设备)开发者模式, 比如我的是pos 机 则在系统设置中找到版本号,点击多次就会触发开发者模式 2.打开真机模拟软件,打开后会打开一个浏览器,如果想要模拟google的浏览器则 在浏览器地…

精准键位提示,键盘盲打轻松入门

在说明精准键位提示之前,我们先来看一张图: 这是一张标准的基准键位图,也就是打字时我们双手的8个手指放在基准键位上,在打不同的字母时,我们的手指以基准键位为中心,或上、或下、或左、或右,在…

202109青少年软件编程(Python)等级考试试卷(四级)

第 1 题 【单选题】 执行如下 Python 代码后, 结果是?( ) def inverse(s,n=0): while s:n = n * 10 + s % 10s = s // 10return nprint

《拯救大学生课设不挂科第二期之Windows11下安装VC6.0(VC++6.0)与跑通Hello,World!程序教程》【官方笔记】

背景与目标人群: 大学第一次学C语言的时候,大部分老师会选择VC6这个编辑器。 但由于很多人是新手,第一次上大学学C语言。 老师要求VC6.0(VC6.0)写C语言跑程序可能很多人还是第一次接触电脑。 需要安装VC6这个编辑器…

Docker常用软件安装

文章目录 1.安装Tomcat1.docker hub查找镜像并复制拉取镜像命令2.拉取镜像到本地1.执行官网命令2.查看是否拉取成功 3.启动tomcat4.退出和重启1.由于是以交互方式启动的,所以不方便,直接ctrl c退出2.查看当前的容器3.使用docker start 命令启动容器&…

【cocos creator 】生成六边形地图

想要生成一个六边形组成的地图 完整代码示例 以下是完整的代码示例,包含了注释来解释每一步: cc.Class({extends: cc.Component,properties: {hexPrefab: {default: null,type: cc.Prefab},mapWidth: 10, // 网格的宽度(六边形的数量&am…

前端React老项目打包caniuse-lite报错解决思路

1、下载项目,先更新.npmrc文件: registryhttp://registry.npmmirror.com 2、安装依赖,本地启动,运行正常,但直接提交代码线上打包时会报错: “ 未找到相关的合并请求。” 打开日志页面,报错信息…