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

前端:最简单封装nmp插件(组件)过程。

一、nmp使用

1、注册nmp账号:npm | Home

2、创建插件名称文件夹,如: vue3-components

3、初始化一个package.json文件:nmp init 

npm init

package.json配置用处介绍,如下:

{// 包名,必须是唯一的,通常与 GitHub 仓库名一致"name": "XXXXX",// 当前包的版本号,遵循语义化版本控制(SemVer),每次上传都需要改版本号,且要大于上次版本号"version": "1.0.0",// 简短描述,用于 npm 网站上的包介绍"description": "仅供测试,别下载",// 入口文件,指定 Node.js 加载模块时的入口点"main": "index.js",// 脚本命令集合,可以通过 npm run <script-name> 执行"scripts": {// 默认的测试脚本,这里只是简单地输出错误信息并退出"test": "echo \"Error: no test specified\" && exit 1"},// 作者信息,可以是一个字符串或对象"author": "###",// 指定包含在发布的包中的文件列表"files": ["dist",  // 编译后的文件目录"src"    // 源代码目录],// 许可证类型,ISC 是一种简化的 BSD 许可证"license": "ISC",// 是否为私有包,如果为 true,则不会发布到 npm 注册表"private": false,// 生产环境依赖项,运行时需要的包"dependencies": {},// Git 仓库信息,包括类型和 URL"repository": {"type": "git","url": "https://github.com/dengzemiao/DZMFullPage.git"},// 错误报告链接,用户可以在这里提交问题"bugs": {"url": "https://XXXX"},// 主页链接,通常是项目的 GitHub 页面或官方网站"homepage": "https://XXXX",// 浏览器兼容性配置,用于工具如 Babel 和 Autoprefixer"browserslist": ["> 1%",      // 全球使用率大于 1% 的浏览器"last 2 versions",  // 最新的两个版本"not ie <= 8"      // 不支持 IE8 及以下版本],// 关键字列表,有助于在 npm 上搜索相关包"keywords": ["测试"]
}

4、登陆 nmp 

npm login 或者 npm adduser 

5、更改镜像

查看当前镜像

npm config get registry

切换nmp镜像

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

6、上传nmp

npm publish

7、撤销上次上传

npm unpublish --force

二、正式封装 与 使用(最简单vue3为例 )

1、vue3-components文件夹,按目录创建:

vue3-components--文件夹名├── doc -- 文档目录
├    ├── img -- 截图
├    └── README.md -- 部分项目示例
├── src -- 源代码目录
├    ├── assets -- icn、图片资源
├    ├── components -- 自定义组件
├    ├      ├── componentA--组件A
├    ├      └── componentB--组件B
├    └── index.js -- 入口文件
├── package.json -- nmp上传文件
└── README.md -- 插件介绍文档

2、package.json文件写入:

{"name": "vue3-components","version": "0.0.1","description": "A plugin with multiple components using ElementPlus","main": "src/index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["vue","element-plus","components",],"author": "Your Name","license": "MIT","dependencies": {"element-plus": "^2.3.0","vue": "^3.2.47",}
}

3、index.js文件写入:

// 组件A
import componentA from "./components/componentA.vue";
// 组件B
import componentB from "./components/componentB.vue";// 只包含实际的组件,并为每个组件指定默认名称
const components = [{ component: componentA, defaultName: "componentA" },{ component: componentB, defaultName: "componentB" },
];const install = (app) => {components.forEach(({ component, defaultName }) => {const componentName = component.name || component.__name || defaultName;if (componentName) {app.component(componentName, component);} else {console.warn(`组件注册失败:无法确定组件名称`, component);}});
};// 导出资源
export { componentA,componentB };// 导出插件
export default install;

4、componentA和componentB写入封装的项目。以componentA组件为例。

<template><div class="test">{{ props.test }}</div>
</template>
<script setup>
const props = defineProps({ test: { type: String, required: true } });
</script>
<style scoped>
.test {color: red;
}
</style>

5、上传nmp插件

cd vue3-componentsnpm publish

6、项目使用:

  1、vue项目内使用:

npm install vue3-components@latest

2、全局注册

import { createApp } from 'vue'
const app = createApp(App)// 引入 ElementPlus 相关样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'; // 引入 sdno-log-view 日志 组件
import vueComponents from 'vue3-components'// 注册  
app.use(ElementPlus)
app.use(vueComponents)

3、使用组件

<template><componentA :test="test" />
</template><script setup>
import { ref } from "vue";
const test = ref('测试')
</script>

相关文章:

前端:最简单封装nmp插件(组件)过程。

一、nmp使用 1、注册nmp账号&#xff1a;npm | Home 2、创建插件名称文件夹&#xff0c;如&#xff1a; vue3-components 3、初始化一个package.json文件&#xff1a;nmp init npm init package.json配置用处介绍&#xff0c;如下&#xff1a; {// 包名&#xff0c;必须…...

百度搜索融合 DeepSeek 满血版,开启智能搜索新篇

百度搜索融合 DeepSeek 满血版&#xff0c;开启智能搜索新篇 &#x1f680; &#x1f539; 一、百度搜索全量接入 DeepSeek &#x1f539; 百度搜索迎来重要升级&#xff0c;DeepSeek 满血版全面上线&#xff01;&#x1f389; 用户在百度 APP 搜索后&#xff0c;点击「AI」即…...

导出指定文件夹下的文件结构 工具模块-Python

python模块代码 import os import json import xml.etree.ElementTree as ET from typing import List, Optional, Dict, Union from pathlib import Path class DirectoryTreeExporter:def __init__(self,root_path: str,output_file: str,fmt: str txt,show_root: boo…...

V4L2驱动之UVC

以下是关于V4L2摄像头驱动框架与UVC协议的关联分析&#xff0c;从内核驱动到用户空间的完整视角&#xff1a; 1. V4L2驱动框架核心架构 关键组件&#xff1a; 核心层 (V4L2 Core) v4l2_device&#xff1a;设备的总入口&#xff0c;管理所有子组件video_device&#xff1a;对应…...

【Linux】匿名管道的应用场景-----管道进程池

目录 一、池化技术 二、简易进程池的实现&#xff1a; Makefile task.h task.cpp Initchannel函数&#xff1a; 创建任务&#xff1a; 控制子进程&#xff1a; 子进程执行任务&#xff1a; 清理收尾&#xff1a; 三、全部代码&#xff1a; 前言&#xff1a; 对于管…...

umi react+antd 判断渲染消息提示、input搜索、多选按钮组

记得map里返回的每层遍历结构都要带上key&#xff08;图里没加&#xff0c;最近在接手react&#xff0c;熟悉中......

Windows桌面系统管理5:Windows 10操作系统注册表

Windows桌面系统管理0&#xff1a;总目录-CSDN博客 Windows桌面系统管理1&#xff1a;计算机硬件组成及组装-CSDN博客 Windows桌面系统管理2&#xff1a;VMware Workstation使用和管理-CSDN博客 Windows桌面系统管理3&#xff1a;Windows 10操作系统部署与使用-CSDN博客 Wi…...

华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南

本文记录 在 华为昇腾 910B(65GB) * 8 上 部署 DeepSeekR1 蒸馏系列模型&#xff08;14B、32B&#xff09;全过程与测试结果。 NPU&#xff1a;910B3 (65GB) * 8 &#xff08;910B 有三个版本 910B1、2、3&#xff09; 模型&#xff1a;DeepSeek-R1-Distill-Qwen-14B、DeepSeek…...

文献阅读 250219-Global water availability boosted by vegetation-driven changes (1)

Global water availability boosted by vegetation-driven changes in atmospheric moisture transport 来自 <https://www.nature.com/articles/s41561-022-01061-7> ## Abstract: 全球水资源的可用性是气候变化研究中的重要议题&#xff0c;尤其是随着气候变化的加剧&a…...

蓝桥杯篇---超声波距离测量频率测量

文章目录 简介第一部分&#xff1a;超声波的简介工作原理1.发射超声波2.接收反射波3.计算时间差4.计算距离 硬件连接1.Trig2.Echo 示例代码代码说明注意事项1.声速2.延时精度3.硬件连接 第二部分&#xff1a;频率测量简介频率测量原理1.信号输入2.计数3.计算频率 硬件连接示例代…...

【玩转 Postman 接口测试与开发2_020】(完结篇)DIY 实战:随书示例 API 项目本地部署保姆级搭建教程(含完整调试过程)

《API Testing and Development with Postman》最新第二版封面 文章目录 最新版《Postman 接口测试与开发实战》示例 API 项目本地部署保姆级搭建教程1 前言2 准备工作3 具体部署3.1 将项目 Fork 到自己名下3.2 创建虚拟环境并安装依赖3.3 初始运行与项目调试 4 示例项目的用法…...

LearnOpenGL——高级OpenGL(下)

教程地址&#xff1a;简介 - LearnOpenGL CN 高级数据 原文链接&#xff1a;高级数据 - LearnOpenGL CN 在OpenGL中&#xff0c;我们长期以来一直依赖缓冲来存储数据。本节将深入探讨一些操作缓冲的高级方法。 OpenGL中的缓冲本质上是一个管理特定内存块的对象&#xff0c;它…...

wangEditor 编辑器 Vue 2.0 + Nodejs 配置

资料 Vue2.0 版本的安装&#xff1a;https://www.wangeditor.com/v5/for-frame.html#%E4%BD%BF%E7%94%A8上传图片配置&#xff1a;https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87 安装步骤 1.安装界面基础部分 <!-- 富文本编辑器…...

机器学习·数据处理

前言 对于大规模数据&#xff0c;我们经常会使用python内置函数或者编写脚本进行批量化处理&#xff0c;从而提高后续使用算法的效率。 1. 正则表达式 定义&#xff1a;用于检索、替换符合某个模式的文本&#xff0c;是文本预处理常用技术。基本语法 符号描述.匹配除换行符 …...

如何在Bigemap Pro中用线分割面、挖空

有时候需要以一条线为界对面元素进行分割或者是需要在一个面元素里面挖空一个面形状的洞&#xff0c;对此需求可以使用bigemap pro工具实现&#xff0c;这里为你介绍一下具体的操作方法。 【一】画线分割面 第一步&#xff1a;现在这是一个不规则多边形&#xff0c;想要以手动…...

网络安全入门攻击与防御实战(四)

漏洞利用&#xff1a;永恒之蓝&#xff08;MS17-010&#xff09;与同类漏洞解析 1 永恒之蓝&#xff08;MS17-010&#xff09;漏洞背景 &#xff08;1&#xff09;漏洞信息 CVE编号&#xff1a;CVE-2017-0143 ~ CVE-2017-0148 影响范围&#xff1a;Windows XP ~ Windows 201…...

DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方DeepSeek接入)

前言 在当今数字化时代&#xff0c;AI编程助手已成为提升开发效率的利器。DeepSeek作为一款强大的AI模型&#xff0c;凭借其出色的性能和开源免费的优势&#xff0c;成为许多开发者的首选。今天&#xff0c;就让我们一起探索如何将DeepSeek接入PyCharm&#xff0c;实现高效、智…...

CF1801D

CF1801D 题目大意&#xff1a; n n n 个顶点&#xff0c; m m m 条边的图。你一开始在起点 1&#xff0c;拥有 P P P 枚硬币&#xff0c;通过每条 ( i , j ) (i,j) (i,j) 边都需要花费一定的硬币 s ( i , j ) s(i,j) s(i,j)。但你在每个城市 i i i 都可以打工赚硬币 w i w…...

大厂算法面试常见问题总结:高频考点与备战指南

在大厂算法面试中&#xff0c;数据结构与算法是必考的核心内容。 无论是校招还是社招&#xff0c;算法题的表现往往决定了面试的成败。 为了帮助大家更好地备战&#xff0c;本文总结了大厂算法面试中的高频考点&#xff0c;并提供了详细的备战建议&#xff0c;助你轻松应对面…...

【R语言】主成分分析与因子分析

一、主成分分析 主成分分析&#xff08;Principal Component Analysis, PCA&#xff09;是一种常用的无监督数据降维技术&#xff0c;广泛应用于统计学、数据科学和机器学习等领域。它通过正交化线性变换将&#xff08;高维&#xff09;原始数据投影到一个新的坐标系&#xff…...

解锁 AIoT 无限可能,乐鑫邀您共赴 Embedded World 2025

2025 年 3 月 11-13 日&#xff0c;全球规模最大的嵌入式展览会——Embedded World 2025 将在德国纽伦堡盛大开幕。作为物联网和嵌入式技术领域的领先企业&#xff0c;乐鑫信息科技 (688018.SH) 将展示在 AI LLM、HMI、双频 Wi-Fi 6、低功耗 MCU 和 Matter 等领域的最新技术及解…...

人工智能基础之数学基础:01高等数学基础

函数 极限 按照一定次数排列的一列数:“&#xff0c;“,…,"…&#xff0c;其中u 叫做通项。 对于数列{Un}如果当n无限增大时&#xff0c;其通项无限接近于一个常数A&#xff0c;则称该数列以A为极限或称数列收敛于A&#xff0c;否则称数列为发散&#xff0c; 极限值 左…...

【从0做项目】Java搜索引擎(8) 停用词表 正则

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 文章导读 零&#xff1a;项目结果展示 一&#xff1a;前引 二&#xff1a;停用词表 1&#xff1a;…...

线程和进程的区别

如果说一个服务器同一时刻收到了许多请求&#xff0c;针对每一个请求&#xff0c;操作系统都会产生一个进程&#xff0c;从而给这个请求提供一些服务 &#xff0c;返回响应&#xff0c;如果请求处理完了&#xff0c;这个进程就要销毁了&#xff01;如果请求很多的话&#xff0c…...

深入理解 QObject的作用

QObject 作为 Qt 库中所有对象的基类&#xff0c;其地位无可替代。几乎 Qt 框架内的每一个类&#xff0c;无论是负责构建用户界面的 QWidget&#xff0c;还是专注于数据处理与呈现的 QAbstractItemModel&#xff0c;均直接或间接继承自 QObject。这种继承体系赋予 Qt 类库高度的…...

解码 NLP:从萌芽到蓬勃的技术蜕变之旅

内容概况&#xff1a; 主要讲述NLP专栏的内容和NLP的发展及其在现代生活中的广泛应用。课程强调实践为主、理论为辅的学习方法&#xff0c;并通过多个生活场景展示了NLP技术的实际应用&#xff0c;如对话机器人、搜索引擎、翻译软件、电商推荐和智能客服等。 这边我就不多做自我…...

【核心算法篇十五】《深度解析DeepSeek遗传算法:让超参数调优从“玄学”变“科学”的终极指南》

引言:超参数调优的“炼丹困局”与破局之路 在机器学习的世界里,调参工程师常被戏称为"炼丹师"——面对动辄几十个超参数的复杂模型,我们就像古代术士守着炼丹炉,不断尝试各种参数组合,期待偶然炼出"仙丹"。传统网格搜索(Grid Search)需要遍历所有可…...

Python—变量、基本数据类型、类型的转换

文章目录 Python—变量、基本数据类型1 格式化输出2 号的使用3 变量的数据类型4 type() 函数的使用5 数据类型的基本介绍5.1 int 整型5.2 float 浮点类型5.3 bool 布尔类型5.4 str 字符串类型5.5 字符串驻留机制5.6 数据类型的转换&#xff08;1&#xff09;隐式转换&#xff…...

启明星辰规则库下载

启明星辰规则库下载 一、脚本介绍 1、背景介绍 因为项目上有启明星辰的安全设备、并且在内网无法直接连接互联网进行在线升级&#xff0c;必须使用离线升级模式&#xff0c;下载规则库升级&#xff0c;每月一更有点繁琐&#xff0c;所以写了这个b脚本&#xff0c;偷懒一下&a…...

uniapp 拖拽排序

1.拖拽排序 使用 sortablejs库 npm install sortablejs --save-dev <template><view id"list"><view v-for"(item, index) in list" :key"item.id" class"item">{{ item.name }}</view></view> </t…...

测试。。。

移动到中位数位置能保证总移动距离最小&#xff0c;数学知识 #include <iostream> #include <vector> #include <cmath> using namespace std;int main() {int n;string s;cin >> n >> s;vector<int> positions;// 记录所有1的位置for (…...

Java常用设计模式及其应用场景

1. 什么是设计模式&#xff1f; 设计模式是一个经过多次验证的、针对常见问题的可复用解决方案。设计模式并不是具体的代码实现&#xff0c;而是给出了如何解决问题的思路和结构。在实际开发过程中&#xff0c;设计模式有助于开发者快速找到合适的解决方案&#xff0c;从而减少…...

2000字,极简版华为数字化转型方法论

​作为国内科技行业的领军者&#xff0c;华为的成功经验为众多企业提供了宝贵的借鉴。本文将围绕准备、规划和执行三个阶段展开&#xff0c;结合华为的实践案例&#xff0c;深入剖析其数字化转型的方法论&#xff0c;希望能为您的企业数字化转型提供有益的参考。 一、数字化转型…...

Ubuntu:20.04更新cmake到更高版本

从输出信息可以看出&#xff0c;您当前的系统中已经安装了 cmake&#xff0c;但版本是 3.16.3&#xff0c;而您的项目需要 CMake 3.18 或更高版本。默认情况下&#xff0c;Ubuntu 20.04 的官方软件仓库中提供的 CMake 版本较低&#xff08;如 3.16.3&#xff09;&#xff0c;因…...

【SpringBoot教程】Spring Boot + MySQL + Druid连接池整合教程

&#x1f64b;大家好&#xff01;我是毛毛张! &#x1f308;个人首页&#xff1a; 神马都会亿点点的毛毛张 前面毛毛张介绍过HikariCP连接池&#xff0c;今天毛毛张来介绍一下Druid连接池&#xff0c;SpringBoot 2.0以上默认使用HikariCP数据源&#xff0c;但是也要学会使用…...

基于SpringBoot实现的宠物领养系统平台功能一

一、前言介绍&#xff1a; 1.1 项目摘要 宠物领养需求增加&#xff1a;随着人们生活水平的提高和对宠物养护意识的增强&#xff0c;越来越多的人选择领养宠物作为家庭的一员。这导致了宠物领养需求的显著增加。 传统领养方式存在问题&#xff1a;传统的宠物领养方式&#xf…...

【DeepSeek 学C++】std::atomic 用于线程控制,和内存强顺序一致性

std::atomic<bool> workerTerminate_{}; std::atomic<bool> workerTerminate_{}; 是一个原子布尔变量的声明&#xff0c;变量名为 workerTerminate_。这种变量通常用于多线程编程中&#xff0c;用来控制或通知工作线程的终止。使用 std::atomic 可以确保对该变量的…...

计算存储一幅大小为 1024×10241024×1024、256 灰度级的图像所需的字节数

1. 图像的基本信息 图像分辨率&#xff1a;1024102410241024&#xff0c;表示图像有 1024 行和 1024 列&#xff0c;总像素数为&#xff1a; 102410241,048,576 像素102410241,048,576 像素 灰度级&#xff1a;256 灰度级&#xff0c;表示每个像素的灰度值可以用 256 个不同的值…...

Flutter 网络请求与数据处理:从基础到单例封装

Flutter 网络请求与数据处理&#xff1a;从基础到单例封装 在 Flutter 开发中&#xff0c;网络请求是一个非常常见的需求&#xff0c;比如获取 API 数据、上传文件、处理分页加载等。为了高效地处理网络请求和数据管理&#xff0c;我们需要选择合适的工具并进行合理的封装。 …...

从开发到部署:EasyRTC嵌入式视频通话SDK如何简化实时音视频通信的集成与应用

嵌入式设备和视频综合管理平台均支持B/S架构。在B/S架构下&#xff0c;传统的视频观看方式依赖于微软的OCX控件&#xff0c;然而OCX控件的使用正面临越来越多的挑战&#xff1a; 首先&#xff0c;用户需要安装浏览器插件、调整浏览器安全级别&#xff0c;并允许ActiveX控件弹出…...

Jeesite5:Star24k,Spring Boot 3.3+Vue3实战开源项目,架构深度拆解!让企业级项目开发效率提升300的秘密武器

嗨&#xff0c;大家好&#xff0c;我是小华同学&#xff0c;关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法 企业级应用开发的需求日益增长。今天&#xff0c;我们要介绍的是一个在GitHub上广受好评的开源项目——Jeesite5。这不仅是一个技术框架&#xff0c;更…...

C++(23):lambda可以省略()

C越来越多的使用了lambda&#xff0c;C23也进一步的放宽了对lambda的限制&#xff0c;这一次&#xff0c;如果lambda没有参数列表&#xff0c;那么可以直接省略掉()&#xff1a; #include <iostream> using namespace std;void func() {auto f []{cout<<"in…...

vue3之echarts柱状图-圆锥加自动轮播

vue3之echarts柱状图-圆锥加自动轮播 效果&#xff1a; 版本 "echarts": "5.4.2" 核心代码&#xff1a; <template><div ref"echartRef" class"chart"></div><svg><linearGradient v-for"(item, i…...

Qt中利用httplib调用https接口

httplib中如果要调用https接口&#xff0c;需要开启OPENSSL支持&#xff0c;经过半天坑爹得摸索&#xff0c;总结下经验。 1&#xff0c;下载 并安装Win64OpenSSL 地址如下&#xff0c;我Qt版本是5.15.2 &#xff0c;openssl选择的是 64位&#xff08;Win64OpenSSL-3_3_3.msi…...

深度学习04 数据增强、调整学习率

目录 数据增强 常用的数据增强方法 调整学习率 学习率 调整学习率 ​调整学习率的方法 有序调整 等间隔调整 多间隔调整 指数衰减 余弦退火 ​自适应调整 自定义调整 数据增强 数据增强是通过对训练数据进行各种变换&#xff08;如旋转、翻转、裁剪等&#xff09;&am…...

卷积神经网络之AlexNet经典神经网络,实现手写数字0~9识别

深度学习中较为常见的神经网络模型AlexNet&#xff0c;AlexNet 是一个采用 GPU 训练的深层 CNN&#xff0c;本质是种 LeNet 变体。由特征提取层的5个卷积层两个下采样层和分类器中的三个全连接层构成。 先看原理&#xff1a; AlexNet网络特点 采用 ReLU 激活函数&#xff0c;…...

建筑兔零基础自学python记录22|实战人脸识别项目——视频人脸识别(下)11

这次我们继续解读代码&#xff0c;我们主要来看下面两个部分&#xff1b; 至于人脸识别成功的要点我们在最后总结~ 具体代码学习&#xff1a; #定义人脸名称 def name():#预学习照片存放位置path M:/python/workspace/PythonProject/face/imagePaths[os.path.join(path,f) f…...

全球化趋势下中资企业出海投资及合规运营实战分享

企业全球化布局需构建“战略-架构-合规-运营”四位一体体系&#xff0c;通过灵活的投资架构、精准的税务规划、本土化运营和ESG融合&#xff0c;实现风险可控的海外扩张。核心策略包括&#xff1a; 供应链多节点布局&#xff08;至少3个国家备份产能&#xff09;&#xff1b;融…...

2025-2-19 leetcode刷题情况(二叉树)

一、226.翻转二叉树 1.题目描述 给你一棵二叉树的根节点root&#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点 2.代码 3.思路 递归遍历&#xff08;DFS&#xff09;交换每个节点的左 / 右子节点&#xff0c;即可生成二叉树的镜像。 递归解析&#xff1a; 终止条件&a…...

Linux常见命令

文件和目录操作命令 cd&#xff1a;用于切换目录。例如&#xff0c;cd /home/user 可进入 /home/user 目录&#xff1b;cd.. 可返回上一级目录。ls&#xff1a;用于列出目录内容。ls 直接列出当前目录下的文件和文件夹&#xff1b;ls -l 以详细列表形式显示&#xff1b;ls -a 显…...