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

news/2024/7/20 17:22:44/文章来源:https://blog.csdn.net/qq_32442967/article/details/139169394

向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.luyixian.cn/news_show_1054058.aspx

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

相关文章

常见排序算法之插入排序

目录 一、直接插入排序 1.1 什么是插入排序 1.2 代码思路 1.3 C语言源码 二、希尔排序 2.0 插入排序的弊端 2.1 什么是希尔排序? 2.2 排序思路 2.3 C语言源码 一、直接插入排序 1.1 什么是插入排序 插入排序是一种简单直观的排序算法,它通过构…

成都爱尔眼科蔡裕主任解说什么是近视性黄斑病变

近视性黄斑病变,属于黄斑病变的其中一种。 黄斑是眼内一个部位,它位于眼底的后极部,视网膜的中心部,管理着光、形、色。黄斑变性是指由于年龄、遗传、不良环境、慢性光损伤等各种因素的影响,使眼部视网膜处的黄斑发生…

Go 和 Delphi 定义可变参数函数的对比

使用可变参数函数具有灵活性、重用性、简化调用等优点,各个语言有各自定义可变参数函数的方法,也有通用的处理方法,比如使用数组、定义参数结构体、使用泛型等。 这里总结记录一下 go、delphi 的常用的定义可变参数函数的方式! 一…

【机器学习系列】使用高斯贝叶斯模型进行数据分类的完整流程

目录 一、导入数据 二、选择特征 三、十折交叉验证 四、划分训练集和测试集 五、训练高斯贝叶斯模型 六、预测测试集 七、查看训练集和测试集上的分数 八、查看混合矩阵 九、输出评估指标 一、导入数据 # 根据商户数据预测其是否续约案例 import pandas #读取数据到 da…

如何部署一套高可用性的医院信息管理系统?基于华为云、SpringBoot、Vue及Jenkins、Gitlab的CI/CD流程

目录 一、项目背景 二、项目架构 三、项目部署流程 1、前端部署 2、后端部署 3、监控与运维 四、项目过程 一、项目背景 随着医疗信息化程度的不断加深,医院信息管理系统的稳定性和可用性成为了医疗机构日常运营的关键。在这个数字化时代&am…

ChatGPT魔法,定制个性化提示词!

扮演Prompt创作者的角色 我想让你成为我的Prompt创作者。你的目标是帮助我创建最佳的Prompt,这个Prompt将由 你ChatGPT使用。 你将遵循以下过程: 1.首先,你会问我Prompt是关于什么的。我会告诉你,但我们需要通过不断的重复来改进…

一些关于深度聚类以及部分对比学习的论文阅读笔记

目录 资料SwAV问题方法方法的创新点为什么有效有什么可以借鉴的地方聚类Multi-crop 代码 PCL代码 Feature Alignment and Uniformity for Test Time Adaptation代码 SimSiam 资料 深度聚类算法研究综述(很赞,从聚类方法和深度学习方法两个方面进行了总结&#xff0…

Linux查看设备信息命令

dmidecode | grep Product Name 查看grub版本号:rpm -qa | grep -i "grub" 客户端操作系统版本: cat /etc/issue cat /etc/redhat-release 处理器品牌及型号: less /proc/cpuinfo |grep model

【Unity入门】认识Unity编辑器

Unity 是一个广泛应用于游戏开发的强大引擎,从 1.0 版本开始到现在,其编辑器的基本框架一直保持稳定。其基于组件架构的设计,使得界面使用起来直观且高效。为了更好地理解 Unity 的界面,我们可以将其比喻为搭建一个舞台。以下是对…

uni微信小程序input框过滤中文字节以及规定以外的符号

问题描述 需求是输入账号只能为手机号、邮箱、字母和数字组成的字符串,那么就是所有大小写字母、数字、以及符号 - _ . 四种。 条件限制 微信小程序无法直接通过type属性实现,type属性中没有专门为只允许英文字母的输入类型。详情见input | uni-ap…

【windows】Total Uninstall:一款功能强大的完全卸载软件

软件介绍 Total Uninstall是一款专业的软件卸载工具,旨在帮助用户彻底地清除计算机上的应用程序,包括与应用程序相关的所有文件和注册表项。以下是Total Uninstall的一些主要功能和特点: 完全卸载:软件可以监视应用程序的安装过程…

使用Django实现WebSocket

文章目录 安装依赖编写Consumer配置路由在模板中使用WebSocket运行应用 WebSocket是一种在单个TCP连接上进行全双工通信的协议,在Web开发中被广泛应用于实时通信和数据推送。本文将介绍如何在Django中使用WebSocket来实现实时通信功能。 安装依赖 首先&#xff0…

基于Java实现震中附近风景区预警可视化分析实践

目录 前言 一、空间数据说明 1、表结构信息展示 2、空间范围查询 二、Java后台开发实现 1、模型层设计与实现 2、控制层设计与实现 三、Leaflet地图开发 1、地震震中位置展示 2、百公里风景区列表展示 3、风景区列表展示 4、附近风景区展示 四、总结 前言 地震这类…

prompt提示词:如何让AI帮你提一个好问题

我们看完一篇文章的时候,有时候发给AI后,不知道如何问AI,不知道问哪些问题,你使用这个提示词,就可以让AI帮你想一个好问题,然后你用AI想好的问题再去问AI 能提出一个好的问题是非常难的 提示词 结合文章…

免费插件集-illustrator插件-Ai插件-文本对象分行

文章目录 1.介绍2.安装3.通过窗口>扩展>知了插件4.功能解释5.总结 1.介绍 本文介绍一款免费插件,加强illustrator使用人员工作效率,进行文本对象分行。首先从下载网址下载这款插件 https://download.csdn.net/download/m0_67316550/87890501&…

【头歌】计算机网络DHCP服务器配置第二关access口配置答案

头歌计算机网络DHCP服务器配置第二关access口配置操作步骤 任务描述 本关任务:创建 vlan ,并且将与 pc 机相连接口划分 vlan 。 操作要求 在第一关的拓扑图的基础上,配置交换机,具体要求如下: 1、在特权模式下进入 vla…

Day06-Mybatis

1. Mybatis介绍 2. Mybatis连接数据库并返回数据事例 连接oracle数据的设置方式 spring.application.namespringboot-mybatis spring.datasource.driver-class-nameoracle.jdbc.OracleDriver spring.datasource.urljdbc:oracle:thin:192.168.100.66:1521:orcl spring.datasour…

IDEA升级web项目为maven项目乱码

今天将一个java web项目改造为maven项目。 首先&#xff0c;创建一个新的maven项目&#xff0c;将文件拷贝到新项目中。 其次&#xff0c;将旧项目的jar包&#xff0c;在maven的pom.xml做成依赖 接着&#xff0c;把没有maven坐标的jar包在编译的时候也包含进来 <build>…

redis数据类型之string,list

华子目录 key操作说明SCAN cursor [MATCH pattern] [COUNT count]dump与restorekeys 通配符 示例演示 string说明setbit key offset valuegetbit key offsetsetrange key offset value List结构图相关命令lrem key count valueltrim key count value示例&#xff1a;使用 LTRIM…

从alpine构建预装vcpkg的docker image用于gitea actions CI

动机 想要构建一个基于vcpkg的交叉编译容器平台用于cpp项目的CI&#xff08;自动集成&#xff09;&#xff0c;此处仅提供最基础的image&#xff0c;amd64的机子上构建完成后大小为533兆&#xff08;着实不小&#x1f613;&#xff09;&#xff0c;各位看官可以在此基础上自行…