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 包
公司需要所以研究了一下怎么部署安装,比较简单 先下载个vue项目 不用安准路由,pinna 啥的,只需要一个最简单的模版 删掉App.vue 中的其它组件 npm create vuelatest 开始写自定义组件 新建一个el-text 组件, name是重点,vue3中…...
华为鸿蒙HarmonyOS应用开发者高级认证视频及题库答案
华为鸿蒙开发者高级认证的学习资料 1、课程内容涵盖HarmonyOS系统介绍、DevEco Studio工具使用、UI设计与开发、Ability设计与开发、分布式特性、原子化服务卡片以及应用发布等。每个实验都与课程相匹配,帮助加深理解并掌握技能 2、学习视频资料 华为HarmonyOS开发…...
【计网】从零开始认识IP协议 --- 认识网络层,认识IP报头结构
从零开始认识IP协议 1 网络层协议1.1 初步认识IP协议1.2 初步理解IP地址 2 IP协议报头3 初步理解网段划分 1 网络层协议 1.1 初步认识IP协议 我们已经熟悉了传输层中的UDP和TCP协议,接下来我们来接触网络层的协议: 网络层在计算机网络中的意义主要体现…...
大一物联网要不要转专业,转不了该怎么办?
有幸在2014年,踩中了物联网的风口,坏消息,牛马的我,一口汤都没喝上。 依稀记得,当时市场部老大,带我去上海参加电子展会,印象最深的,一些物联网云平台,靠着一份精美PPT&a…...
LeetCode题练习与总结:4的幂--342
一、题目描述 给定一个整数,写一个函数来判断它是否是 4 的幂次方。如果是,返回 true ;否则,返回 false 。 整数 n 是 4 的幂次方需满足:存在整数 x 使得 n 4^x 示例 1: 输入:n 16 输出&am…...
ubuntu GLEW could not be initialized : Unknown error
原因 某些ubuntu版本默认使用wayland协议,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 又一个发现 都不知道是第几了 是一个高效的目标检测 动态候选较大程度提升检测精度 目标检测是一项基本的计算机视觉任务,用于对给定图像中的目标进行定位和分类。 论文地址:…...
前端工程化面试题
说一下模块化方案 模块化是为了解决代码的复用和组织问题,可以说有了模块化才让前端有了工程的概念,模块化要解决两大问题 代码隔离和依赖管理,从node.js最早发布的commonjs 到浏览器端的 AMD,CMD 规范以及兼容的 UMD 规范,再到现…...
【Visual Studio】下载安装 Visual Studio Community 并配置 C++ 桌面开发环境的图文教程
引言 Visual Studio 是一个面向 .NET 和 C 开发人员的综合性 Windows 版 IDE,可用于构建 Web、云、桌面、移动应用、服务和游戏。 安装步骤 访问 Visual Studio 的官方下载页面: https://visualstudio.microsoft.com/zh-hans/downloads/运行已下载的 V…...
010Editor:十六进制编辑器
介绍 世界上最好的十六进制编辑器和出色的文本编辑器 010 Editor 是用于处理文本和二进制数据的终极工具包。 添加模板 模板库https://www.sweetscape.com/010editor/repository/templates/ 先下载一个ELF 模板 运行模板...
Vscode中Github Copilot无法使用
现象 Copilot侧边栏显示要登录,但是点击"github登录"没有反应与Copilot对话,报错如下: Unexpected token o, "[object Rea"... is not valid JSON解决方案 在网上怎么找都没找到类似的问题,最后发现是Vsco…...
<项目代码>YOLOv8表情识别<目标检测>
YOLOv8是一种单阶段(one-stage)检测算法,它将目标检测问题转化为一个回归问题,能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法(如Faster R-CNN),YOLOv8具有更高的…...
利用Msfvenom实现对Windows的远程控制
1.实验准备 kali安装 Apache2(如果尚未安装): sudo apt install apache2 启动 Apache2 服务: sudo systemctl start apache2确认 Apache2 的默认网页可以访问: 打开浏览器并访问 http://<你的Kali IP>ÿ…...
Java Iterator和for区别详解和常见问题及解决方式
在 Java 中,Iterator 是一个用于遍历集合元素的接口。它为访问集合中的元素提供了一种标准的方法,不管具体集合的实现如何。本文将详细讲解 Iterator 的使用、其与 for 循环的区别,以及在遍历集合时的删除操作可能带来的问题,并提…...
川渝地区软件工程考研择校分析
C哥专业提供——计软考研院校选择分析专业课备考指南规划 通过最新数据分析,5所高校软件工程专业2025年考研难度从高到低预计为: 电子科技大学 >> 四川大学 > 重庆大学 ≈ 西南交通大学 > 西南大学 对于想考川渝地区985但核心目标为优先上岸的考生,建议重点考虑西…...
快捷键记忆
快捷键记忆 文章目录 快捷键记忆前言一、PotPlayer快捷键二、电脑快捷键总结 前言 提示:以下是本篇文章正文内容: 一些软件的快捷键经常忘记,写这篇文章的目的是帮助我忘记的时候来查看。 顺序实时更新: 一、PotPlayer快捷键 Po…...
Flutter鸿蒙next 状态管理高级使用:深入探讨 Provider
✅近期推荐:求职神器 https://bbs.csdn.net/topics/619384540 🔥欢迎大家订阅系列专栏:flutter_鸿蒙next 💬淼学派语录:只有不断的否认自己和肯定自己,才能走出弯曲不平的泥泞路,因为平坦的大路…...
JMeter实战之——模拟登录
本篇介绍使用JMeter 如何对需要登录的站点进行压力测试。 基本Session验证的机制 使用session进行请求验证的机制是一种常见的Web应用认证方式。 该认证方式的主要内容如下: 一、登录过程 用户输入:用户在登录页面输入用户名和密码。发送请求&#x…...
智能台灯设计(一)原理图设计
1. 前言 作者最近突发奇想,想自己做一个小台灯,设想的功能有:带锂电池可充电、可以调节亮度,后续通过增加WIFI模块实现手机控制开关功能。目前先实现最简单的功能,有时间再一步步完善吧。 2. 原理图设计 充电芯片使用…...
数据库查询返回结果集及其元数据信息:ResultSet 和 ResultSetMetaData 深度解析
全文目录: 开篇语📌 目录🌟 前言📝 摘要📚 简介🔍 概述🧩 核心源码解读1️⃣ 创建数据库连接2️⃣ 执行查询获取结果集3️⃣ 读取查询数据4️⃣ 获取元数据信息 💻 案例分析…...
2.插入排序(斗地主起牌)
一、思想 扑克牌起牌 代码: 二、时间复杂度: 最好情况(已经排序好的):T O(N) 最坏情况(完全逆序):T O(N^2) 三、优劣: 严格的大小比较之后才进行错位插入&#x…...
漫谈编程小白如何成为大神:夯实基础,开启通神之路
在当今数字化时代,编程已成为一项基本技能,对于大学新生而言,掌握编程能力不仅能够为学术研究提供支持,还能为未来的职业生涯开辟广阔天地。然而,面对琳琅满目的编程语言和学习资源,新生们往往会感到迷茫和…...
基于机器学习的个性化电影推荐系统【源码+安装+讲解+售后+文档】
【1】系统介绍 研究背景 随着互联网技术的迅速发展,数字娱乐内容特别是电影和电视剧的数量急剧增加。用户在享受丰富内容的同时,也面临着选择困难的问题,即“信息过载”。传统的搜索和分类方法已经无法满足用户日益增长的个性化需求。与此同…...
企业如何配合好等级保护测评工作?
企业如何配合好等级保护测评工作,是一个涉及多方面因素的系统性任务。等级保护测评,简称等保测评,是中国对信息和信息系统安全的重要管理手段和评估制度。通过这一制度,企业可以全面了解其信息系统的安全状况,及时发现…...
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、课程信息 📖 推荐阅读 1、证书 汽车功能安全工程师去拿类似莱茵、SGS、南德颁发的证书,如下: 2、课程信息 一般上什么课程了,课程信息大概如下: 汽车功能安全工程师认证课 (3天&#…...
axios直接上传binary
axios直接上传二进制文件 、 axios直接上传apk、axios直接上传binary postman中的参数选项中有个binary,平常我们很少使用,可能有的同学遇到这种情况不太会了,认为后端应该有个字段名来接收,或者使用 Formdata,但其实…...
量化交易API接口是什么?如何申请和应用?
炒股自动化:申请官方API接口,散户也可以 python炒股自动化(0),申请券商API接口 python炒股自动化(1),量化交易接口区别 Python炒股自动化(2):获取…...
语义分割:YOLOv11的分割模型训练自己的数据集(从代码下载到实例测试)
文章目录 前言一、环境搭建二、构建数据集三、修改配置文件①数据集文件配置②模型文件配置 四、模型训练和测试模型训练模型验证模型推理 总结 前言 专栏目录:YOLOv11改进目录一览 | 涉及卷积层、轻量化、注意力、损失函数、Backbone、SPPF、Neck、检测头等全方位改…...
Python爬虫:从入门到精通
Python爬虫:从入门到精通 在数字时代,信息就如同水源,源源不绝。然而,当你想要从海量的信息中汲取有价值的“水”,你会发现这并不是一件容易的事。这就是为什么网络爬虫出现了。它们帮助我们在网络的海洋中航行&#…...
大浪网站建设/网络广告投放网站
解决在Oracle数据库中使用hibernate生成表不能正确创建表的有关问题 www.MyException.Cn 发布于:2013-08-26 12:17:40 浏览:16次 0解决在Oracle数据库中使用hibernate生成表不能正确创建 表的问题 最近在项目中使用hibernate的动态生成表&#x…...
济南网站建设 选聚搜网络/百度一下 你就知道官网
中国咖啡市场潜力到底有多大?一则数据就可说明!据NCBD数据显示,2021年中国现制咖啡市场规模为924.5亿元,与咖啡相关的企业成立数达到2.6万家,门店数已突破12万家。预计到2025年,中国现制咖啡市场规模将突破…...
为什么要完善网站建设/学seo推广
朋友们,如需转载请标明出处:https://blog.csdn.net/jiangjunshow 声明:在人工智能技术教学期间,不少学生向我提一些python相关的问题,所以为了让同学们掌握更多扩展知识更好的理解人工智能技术,我让助理负…...
网站首页怎么做/免费发帖推广的平台
保证1920px的图片,在低分率率的电脑上也能正常显示,两边裁剪,中间居中,高度不变 <!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是一个分布式流处理平台,主要用于处理实时数据流。它可以用于日志收集、数据流…...
呼和浩特网站建设设计/百度店面定位怎么申请
来源 | 信风智库综合《九章算术》,是中国古代最早的数学专著,它的出现标志中国古代数学形成了完整的体系。借用《九章算术》之名,12月4日,中国科学技术大学宣布该校潘建伟团队成功构建“九章”量子计算原型机,实现了“…...