当前位置: 首页 > 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;你会发现这并不是一件容易的事。这就是为什么网络爬虫出现了。它们帮助我们在网络的海洋中航行&#…...

网站推广公司认准乐云seo/厦门seo网站管理

在视图函数中验证表单 因为现在的basic_form视图同时接受两种类型的请求&#xff1a;GET请求和POST请求。所以我们要根据请求方法的不同执行不同的代码。具体来说&#xff0c;首先是实例化表单&#xff0c;如果是GET请求&#xff0c;就渲染模板&#xff1b;如果是POST请求&…...

java开发网站的优势/百度人气榜排名

如何去掉默认注释?* window -- Preferences -- Java -- Code Style -- Code Templates* 选择你不想要的内容&#xff0c;通过右边Edit编辑。* 注意&#xff1a;请只删除注释部分&#xff0c;不是注释部分的不要删除。 行号的显示和隐藏* 显示&#xff1a;在代码区域的最左边的…...

品牌网站建设解决/外贸网站模板

危险函数 mixed eval (string $code) 把字符串作为PHP代码执行bool assert (mixed $assertion [,string $description]) 替代eval函数。相同功能。mixed preg_replace(mixed $pattern,mixed $replacement,mixed $subject[,int $limit-1 [,int&$count]])/e修正符使preg_rep…...

wordpress 做论坛/百度刷自己网站的关键词

我试图写出一些文本&#xff0c;并在可能的情况下将其编码为utf-8&#xff0c;使用以下代码&#xff1a;outf.write((lang_name "," (script_name or "") "\n").encode("utf-8", errorsreplace))我得到以下错误&#xff1a;^{pr2}$…...

网站建设论文选题背景/哈尔滨优化推广公司

本文已获得原作者的独家授权&#xff0c;有想转载的朋友们可以在后台联系我申请开白哦&#xff01;PS&#xff1a;欢迎掘友们向我投稿哦&#xff0c;被采用的文章还可以送你掘金精美周边&#xff01;原文地址&#xff1a;Why React Hooks Are the Wrong Abstraction原文作者&am…...

网站建设要用多少种字体/网址seo关键词

题目 给你一个整数数组 nums &#xff0c;除某个元素仅出现 一次 外&#xff0c;其余每个元素都恰出现 三次 。请你找出并返回那个只出现了一次的元素。 示例 输入&#xff1a;nums [2,2,3,2] 输出&#xff1a;3 输入&#xff1a;nums [0,1,0,1,0,1,99] 输出&#xff1a;…...