当前位置: 首页 > news >正文

vue3+vite 部署npm 包

公司需要所以研究了一下怎么部署安装,比较简单

先下载个vue项目

不用安准路由,pinna 啥的,只需要一个最简单的模版
删掉App.vue 中的其它组件

 npm create vue@latest    
开始写自定义组件

在这里插入图片描述

新建一个el-text 组件, name是重点,vue3中也得这么导出name属性

<script>
export default {name: 'elText',
}
</script>
<template><div>我是一个text组件{{ title }}<button @click="handleClick">按钮</button></div>
</template>
<script setup>
import {ref} from 'vue'
let title = ref('123')
let handleClick = () => {title.value = '我的test'
}
</script>

新建index.js 导出自己写的组件

import elText from './el-text.vue'const comment = [elText]const install = function (App) {comment.forEach((item) => {App.component(item.name, item)})
}
// 判断是否直接引入文件,如果是,就不用调用Vue.use()
if (typeof window !== 'undefined' && window.Vue) {install(window.Vue)
}
export default install
测试自己写的组件有没有问题

在这里插入图片描述
在这里插入图片描述

vite 打包配置

name 名自己起就行了

import {fileURLToPath, URL} from 'node:url'import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'node:path'// https://vite.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url)),},},build: {lib: {entry: path.resolve(__dirname, './src/components/index.js'),name: 'smart-process',fileName: 'process',},rollupOptions: {external: ['vue'],output: {globals: {vue: 'Vue',},},},},
})

配置完成后执行 npm run build

配置package.json

privite 必须是false,文件地址也要写对
在这里插入图片描述

npm 发布

npm 网址

前提: npm 代理地址要用 npm(官方镜像)
在这里插入图片描述

npm login 
// 登录成功后
npm publish

在这里插入图片描述

使用
新建一个vue项目
npm i smart-process

引入我自己部署的插件并使用
在这里插入图片描述
这里直接使用在smart-process 中开发的el-text组件
在这里插入图片描述
效果图

在这里插入图片描述

相关文章:

vue3+vite 部署npm 包

公司需要所以研究了一下怎么部署安装&#xff0c;比较简单 先下载个vue项目 不用安准路由&#xff0c;pinna 啥的&#xff0c;只需要一个最简单的模版 删掉App.vue 中的其它组件 npm create vuelatest 开始写自定义组件 新建一个el-text 组件, name是重点&#xff0c;vue3中…...

华为鸿蒙HarmonyOS应用开发者高级认证视频及题库答案

华为鸿蒙开发者高级认证的学习资料 1、课程内容涵盖HarmonyOS系统介绍、DevEco Studio工具使用、UI设计与开发、Ability设计与开发、分布式特性、原子化服务卡片以及应用发布等。每个实验都与课程相匹配&#xff0c;帮助加深理解并掌握技能 2、学习视频资料 华为HarmonyOS开发…...

【计网】从零开始认识IP协议 --- 认识网络层,认识IP报头结构

从零开始认识IP协议 1 网络层协议1.1 初步认识IP协议1.2 初步理解IP地址 2 IP协议报头3 初步理解网段划分 1 网络层协议 1.1 初步认识IP协议 我们已经熟悉了传输层中的UDP和TCP协议&#xff0c;接下来我们来接触网络层的协议&#xff1a; 网络层在计算机网络中的意义主要体现…...

大一物联网要不要转专业,转不了该怎么办?

有幸在2014年&#xff0c;踩中了物联网的风口&#xff0c;坏消息&#xff0c;牛马的我&#xff0c;一口汤都没喝上。 依稀记得&#xff0c;当时市场部老大&#xff0c;带我去上海参加电子展会&#xff0c;印象最深的&#xff0c;一些物联网云平台&#xff0c;靠着一份精美PPT&a…...

LeetCode题练习与总结:4的幂--342

一、题目描述 给定一个整数&#xff0c;写一个函数来判断它是否是 4 的幂次方。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 整数 n 是 4 的幂次方需满足&#xff1a;存在整数 x 使得 n 4^x 示例 1&#xff1a; 输入&#xff1a;n 16 输出&am…...

ubuntu GLEW could not be initialized : Unknown error

原因 某些ubuntu版本默认使用wayland协议&#xff0c;glew不支持 解决方法 1、编辑GDM3配置文件 sudo nano /etc/gdm3/custom.conf 2、修改配置文件 去掉#WaylandEnablefalse前的# 3、重启GDM3服务 sudo systemctl restart gdm3 修改后默认使用X11协议。...

51c~目标检测~合集1

我自己的原文哦~ https://blog.51cto.com/whaosoft/12371248 #目标检测x1 又一个发现 都不知道是第几了 是一个高效的目标检测 动态候选较大程度提升检测精度 目标检测是一项基本的计算机视觉任务&#xff0c;用于对给定图像中的目标进行定位和分类。 论文地址&#xff1a…...

前端工程化面试题

说一下模块化方案 模块化是为了解决代码的复用和组织问题&#xff0c;可以说有了模块化才让前端有了工程的概念&#xff0c;模块化要解决两大问题 代码隔离和依赖管理&#xff0c;从node.js最早发布的commonjs 到浏览器端的 AMD,CMD 规范以及兼容的 UMD 规范&#xff0c;再到现…...

【Visual Studio】下载安装 Visual Studio Community 并配置 C++ 桌面开发环境的图文教程

引言 Visual Studio 是一个面向 .NET 和 C 开发人员的综合性 Windows 版 IDE&#xff0c;可用于构建 Web、云、桌面、移动应用、服务和游戏。 安装步骤 访问 Visual Studio 的官方下载页面&#xff1a; https://visualstudio.microsoft.com/zh-hans/downloads/运行已下载的 V…...

010Editor:十六进制编辑器

介绍 世界上最好的十六进制编辑器和出色的文本编辑器 010 Editor 是用于处理文本和二进制数据的终极工具包。 添加模板 模板库https://www.sweetscape.com/010editor/repository/templates/ 先下载一个ELF 模板 运行模板...

Vscode中Github Copilot无法使用

现象 Copilot侧边栏显示要登录&#xff0c;但是点击"github登录"没有反应与Copilot对话&#xff0c;报错如下&#xff1a; Unexpected token o, "[object Rea"... is not valid JSON解决方案 在网上怎么找都没找到类似的问题&#xff0c;最后发现是Vsco…...

<项目代码>YOLOv8表情识别<目标检测>

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…...

利用Msfvenom实现对Windows的远程控制

1.实验准备 kali安装 Apache2&#xff08;如果尚未安装&#xff09;&#xff1a; sudo apt install apache2 启动 Apache2 服务&#xff1a; sudo systemctl start apache2确认 Apache2 的默认网页可以访问&#xff1a; 打开浏览器并访问 http://<你的Kali IP>&#xff…...

Java Iterator和for区别详解和常见问题及解决方式

在 Java 中&#xff0c;Iterator 是一个用于遍历集合元素的接口。它为访问集合中的元素提供了一种标准的方法&#xff0c;不管具体集合的实现如何。本文将详细讲解 Iterator 的使用、其与 for 循环的区别&#xff0c;以及在遍历集合时的删除操作可能带来的问题&#xff0c;并提…...

川渝地区软件工程考研择校分析

C哥专业提供——计软考研院校选择分析专业课备考指南规划 通过最新数据分析,5所高校软件工程专业2025年考研难度从高到低预计为: 电子科技大学 >> 四川大学 > 重庆大学 ≈ 西南交通大学 > 西南大学 对于想考川渝地区985但核心目标为优先上岸的考生,建议重点考虑西…...

快捷键记忆

快捷键记忆 文章目录 快捷键记忆前言一、PotPlayer快捷键二、电脑快捷键总结 前言 提示&#xff1a;以下是本篇文章正文内容&#xff1a; 一些软件的快捷键经常忘记&#xff0c;写这篇文章的目的是帮助我忘记的时候来查看。 顺序实时更新&#xff1a; 一、PotPlayer快捷键 Po…...

Flutter鸿蒙next 状态管理高级使用:深入探讨 Provider

✅近期推荐&#xff1a;求职神器 https://bbs.csdn.net/topics/619384540 &#x1f525;欢迎大家订阅系列专栏&#xff1a;flutter_鸿蒙next &#x1f4ac;淼学派语录&#xff1a;只有不断的否认自己和肯定自己&#xff0c;才能走出弯曲不平的泥泞路&#xff0c;因为平坦的大路…...

JMeter实战之——模拟登录

本篇介绍使用JMeter 如何对需要登录的站点进行压力测试。 基本Session验证的机制 使用session进行请求验证的机制是一种常见的Web应用认证方式。 该认证方式的主要内容如下&#xff1a; 一、登录过程 用户输入&#xff1a;用户在登录页面输入用户名和密码。发送请求&#x…...

智能台灯设计(一)原理图设计

1. 前言 作者最近突发奇想&#xff0c;想自己做一个小台灯&#xff0c;设想的功能有&#xff1a;带锂电池可充电、可以调节亮度&#xff0c;后续通过增加WIFI模块实现手机控制开关功能。目前先实现最简单的功能&#xff0c;有时间再一步步完善吧。 2. 原理图设计 充电芯片使用…...

数据库查询返回结果集及其元数据信息:ResultSet 和 ResultSetMetaData 深度解析

全文目录&#xff1a; 开篇语&#x1f4cc; 目录&#x1f31f; 前言&#x1f4dd; 摘要&#x1f4da; 简介&#x1f50d; 概述&#x1f9e9; 核心源码解读1️⃣ 创建数据库连接2️⃣ 执行查询获取结果集3️⃣ 读取查询数据4️⃣ 获取元数据信息 &#x1f4bb; 案例分析&#x1…...

2.插入排序(斗地主起牌)

一、思想 扑克牌起牌 代码&#xff1a; 二、时间复杂度&#xff1a; 最好情况&#xff08;已经排序好的&#xff09;&#xff1a;T O(N) 最坏情况&#xff08;完全逆序&#xff09;&#xff1a;T O(N^2) 三、优劣&#xff1a; 严格的大小比较之后才进行错位插入&#x…...

漫谈编程小白如何成为大神:夯实基础,开启通神之路

在当今数字化时代&#xff0c;编程已成为一项基本技能&#xff0c;对于大学新生而言&#xff0c;掌握编程能力不仅能够为学术研究提供支持&#xff0c;还能为未来的职业生涯开辟广阔天地。然而&#xff0c;面对琳琅满目的编程语言和学习资源&#xff0c;新生们往往会感到迷茫和…...

基于机器学习的个性化电影推荐系统【源码+安装+讲解+售后+文档】

【1】系统介绍 研究背景 随着互联网技术的迅速发展&#xff0c;数字娱乐内容特别是电影和电视剧的数量急剧增加。用户在享受丰富内容的同时&#xff0c;也面临着选择困难的问题&#xff0c;即“信息过载”。传统的搜索和分类方法已经无法满足用户日益增长的个性化需求。与此同…...

企业如何配合好等级保护测评工作?

企业如何配合好等级保护测评工作&#xff0c;是一个涉及多方面因素的系统性任务。等级保护测评&#xff0c;简称等保测评&#xff0c;是中国对信息和信息系统安全的重要管理手段和评估制度。通过这一制度&#xff0c;企业可以全面了解其信息系统的安全状况&#xff0c;及时发现…...

Could not find artifact cn.hutool:hutool-all:jar:8.1 in central 导入Hutool报错

<!-- https://mvnrepository.com/artifact/cn.hutool/hutool-all --><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.9</version></dependency> 引入hutool 8.1版本的工具…...

【功能安全】汽车功能安全个人认证证书

目录 1、证书 2、课程信息 &#x1f4d6; 推荐阅读 1、证书 汽车功能安全工程师去拿类似莱茵、SGS、南德颁发的证书&#xff0c;如下&#xff1a; 2、课程信息 一般上什么课程了&#xff0c;课程信息大概如下&#xff1a; 汽车功能安全工程师认证课 &#xff08;3天&#…...

axios直接上传binary

axios直接上传二进制文件 、 axios直接上传apk、axios直接上传binary postman中的参数选项中有个binary&#xff0c;平常我们很少使用&#xff0c;可能有的同学遇到这种情况不太会了&#xff0c;认为后端应该有个字段名来接收&#xff0c;或者使用 Formdata&#xff0c;但其实…...

量化交易API接口是什么?如何申请和应用?

炒股自动化&#xff1a;申请官方API接口&#xff0c;散户也可以 python炒股自动化&#xff08;0&#xff09;&#xff0c;申请券商API接口 python炒股自动化&#xff08;1&#xff09;&#xff0c;量化交易接口区别 Python炒股自动化&#xff08;2&#xff09;&#xff1a;获取…...

语义分割:YOLOv11的分割模型训练自己的数据集(从代码下载到实例测试)

文章目录 前言一、环境搭建二、构建数据集三、修改配置文件①数据集文件配置②模型文件配置 四、模型训练和测试模型训练模型验证模型推理 总结 前言 专栏目录&#xff1a;YOLOv11改进目录一览 | 涉及卷积层、轻量化、注意力、损失函数、Backbone、SPPF、Neck、检测头等全方位改…...

Python爬虫:从入门到精通

Python爬虫&#xff1a;从入门到精通 在数字时代&#xff0c;信息就如同水源&#xff0c;源源不绝。然而&#xff0c;当你想要从海量的信息中汲取有价值的“水”&#xff0c;你会发现这并不是一件容易的事。这就是为什么网络爬虫出现了。它们帮助我们在网络的海洋中航行&#…...

大浪网站建设/网络广告投放网站

解决在Oracle数据库中使用hibernate生成表不能正确创建表的有关问题 www.MyException.Cn 发布于&#xff1a;2013-08-26 12:17:40 浏览&#xff1a;16次 0解决在Oracle数据库中使用hibernate生成表不能正确创建 表的问题 最近在项目中使用hibernate的动态生成表&#x…...

济南网站建设 选聚搜网络/百度一下 你就知道官网

中国咖啡市场潜力到底有多大&#xff1f;一则数据就可说明&#xff01;据NCBD数据显示&#xff0c;2021年中国现制咖啡市场规模为924.5亿元&#xff0c;与咖啡相关的企业成立数达到2.6万家&#xff0c;门店数已突破12万家。预计到2025年&#xff0c;中国现制咖啡市场规模将突破…...

为什么要完善网站建设/学seo推广

朋友们&#xff0c;如需转载请标明出处&#xff1a;https://blog.csdn.net/jiangjunshow 声明&#xff1a;在人工智能技术教学期间&#xff0c;不少学生向我提一些python相关的问题&#xff0c;所以为了让同学们掌握更多扩展知识更好的理解人工智能技术&#xff0c;我让助理负…...

网站首页怎么做/免费发帖推广的平台

保证1920px的图片&#xff0c;在低分率率的电脑上也能正常显示&#xff0c;两边裁剪&#xff0c;中间居中&#xff0c;高度不变 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Document</title>…...

wordpress安卓源码/百度知道合伙人答题兼职入口

文章目录前言一、Kafka的使用1.安装包2.注入3.封装3.1 IKafkaConsumer和IKafkaProducer3.2 KafkaConsumer和KafkaProducer3.3 KafkaConfig配置类3.4 KafkaHelper帮助类4.使用前言 Kafka是一个分布式流处理平台&#xff0c;主要用于处理实时数据流。它可以用于日志收集、数据流…...

呼和浩特网站建设设计/百度店面定位怎么申请

来源 | 信风智库综合《九章算术》&#xff0c;是中国古代最早的数学专著&#xff0c;它的出现标志中国古代数学形成了完整的体系。借用《九章算术》之名&#xff0c;12月4日&#xff0c;中国科学技术大学宣布该校潘建伟团队成功构建“九章”量子计算原型机&#xff0c;实现了“…...