如何发布自己的npm包

发布一个简单的npm包

  1. 首先创建一个文件夹(唯一的命名)
  2. 创建package.json包,输出npm init,一直回车就好。
  3. 创建index.js文件,向外暴露方法。

将包上传或更新到 npm 

执行登录命令:npm login
登录npm官网,根据提示输入用户名和密码,邮箱(邮箱必须在注册时进行验证)

 发布版本,在登陆命令后接着输入如下命令

npm publish

 发布上传后,你可以去 npm 官网上查一下自己的包有没有存在。

 

 在项目中安装你的包

npm i xxx -s,在main.js中引用

 

 在vue项目任何页面使用

 发布一个自己组件包

1、在项目中添加组件库文件夹:

在根目录下新建一个plugins文件夹,用来放组件,项目文件结构为:
 (我的是跟src平级 创建plugins组件文件夹)

 2、添加配置文件

项目根目录下面添加vue.config.js文件,写入以下内容:(主要是配置webpack的打包)

 3、编写组件

把封装的组件、封装的指令和封装的过滤器每个都写在分类文件夹中,后面在合理添加并继续封装。下面我以datetime这个组件为例:(是一个时间显示组件)

建组件date-time.vue和单独暴露组件的index.js文件:

 date-time.vue内容如下:

<template><div class="date-time" :style="{ 'font-size': `${useStyleObj.fontSize}px` }"><p :style="styleObject">{{ nowDate }}</p><p :style="styleObject">{{ nowTime }}</p></div>
</template>
<script>
export default {name: "dateTime",props: {styleObj: {//客户端传递的样式type: Object,default: () => ({fontSize: 25,color: ["#dcedff", "#5ca9ff"]})}},computed: {useStyleObj() {//用computed是为了暴露客户端的styleObj样式属性值可以选填,更加灵活let size = 25;let color = ["#dcedff", "#5ca9ff"];if (this.styleObj.fontSize) {size = this.styleObj.fontSize;}if (this.styleObj.color) {color = this.styleObj.color;}return {fontSize: size,color: color};},styleObject() {//根据客户端传递的样式值配置文字的渐变色return {background: `linear-gradient(180deg,${this.useStyleObj["color"][0]},${this.useStyleObj.color.length > 1? this.useStyleObj["color"][1]: this.useStyleObj["color"][0]})`,"-webkit-background-clip": "text"};}},data() {return {timer: null,nowWeek: "",nowDate: "",nowTime: ""//   styleBox: {}};},created() {this.timer = setInterval(() => {this.setNowTimes();}, 1000); //时间},beforeDestroy: function() {if (this.timer) {clearInterval(this.timer);}},methods: {setNowTimes() {//时间拼接方法const myDate = new Date();const wk = myDate.getDay();const yy = String(myDate.getFullYear());const mm = myDate.getMonth() + 1;const dd = String(myDate.getDate() < 10 ? `0${myDate.getDate()}` : myDate.getDate());const hou = String(myDate.getHours() < 10 ? `0${myDate.getHours()}` : myDate.getHours());const min = String(myDate.getMinutes() < 10? `0${myDate.getMinutes()}`: myDate.getMinutes());const sec = String(myDate.getSeconds() < 10? `0${myDate.getSeconds()}`: myDate.getSeconds());const weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];const week = weeks[wk];this.nowDate = `${yy}/${mm}/${dd} ${week}`;this.nowTime = `${hou}:${min}:${sec}`;this.nowWeek = week;}}
};
//样式文件
</script>
<style lang="scss" scoped></style>

index.js文件内容:为组件提供 install 方法,供组件对外按需引入

import dateTimes from "./date-time.vue";dateTimes.install = Vue => Vue.component(dateTimes.name, dateTimes); //注册组件export default dateTimes;

这个单独暴露组件的 index.js,意思是如果这个工程值封装一个组件使用的话,就用这个index.js 文件暴露 install 即可了。 

plugins 文件夹下面新建一个 index.js 文件,为了统一导出所有组件及暴露 install 方法。之前的 index.js 只是安装单个组件,而现在这个 index.js 是循环安装所有组件、所有指令、过滤器统一暴露出去,可以按需引用组件,此时plugins文件夹的内容为:

 我这里是统一暴露组件、指令、过滤器:

//组件
import DateTime from "./components/dateTime/date-time.vue"//所有组件列表
const components = [DateTime]//定义install方法,Vue作为参数
const install = Vue => {//判断是否安装,安装过就不用继续执行if (install.installed) returninstall.installed = true//遍历注册所有组件components.map(component => Vue.component(component.name, component))
}//检测到Vue再执行
if (typeof window !== "undefined" && window.Vue) {install(window.Vue);
}
export default {install,//所有组件,必须具有install方法才能使用Vue.use()...components
}

4、在本地页面中使用组件

在main.js中引入

 在页面中不用引入使用使用组件,因为是全局注册了组件库,所以可以直接使用标签,这个标签与组件文件中的date-time.vue里的name保持一致,只不过一个是驼峰式写法,一个是标签名称。

 

 

 测试可以全局使用组件,说明封装的组件没有问题,下面可以打包了。

5、打包

在package.json文件中的"scripts"字段里添加以下内容:

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lib": "vue-cli-service build --target lib --name 包名 -dest lib plugins/index.js","lint": "vue-cli-service lint"},

因为在vue-cli中,可以通过以下命令将一个单独的入口打包成库

// target: 默认为构建应用,改为 lib 即可启用构建库模式
// name: 输出文件名
// dest: 输出目录,默认为 dist,这里我们改为 lib
// entry: 入口文件路径
vue-cli-service build --target lib --name lib [entry]

 package.json中配置打包信息:

  • .gitignore文件中添加:
  • 把包的一些测试文件过滤掉,最终打包只留下直接封装的文件,即plugins中封装的暴露组件

 

 在终端执行npm run lib 即可,执行结果:

 

 6、发布包

 7、使用包

npm i xgs_common -s
在项目文件mainjs中引入。

在项目中直接使用组件中的name即可
例如:<date-time/>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/22429.shtml

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

相关文章

React Hooks 中的属性详解

React Hooks 是 React 16.8 版本中新增的特性&#xff0c;允许我们在不编写 class 的情况下使用 state 和其他的 React 特性。Hooks 是一种可以让你在函数组件中“钩入” React 特性的函数。以下是一些常用的 React Hooks&#xff0c;并附有详细的用法和代码示例。 1. useStat…

OPENCV C++(二)直方图+分离颜色通道+画圆画线画矩形

分离RGB彩图颜色通道 也就是把每种分量的亮度图提出来 vector<Mat> channels;split(image1, channels);Mat R channels.at(0);Mat G channels.at(1);Mat B channels.at(2); 这样R,G,B每个图就是这个图的颜色分量图了 图片的克隆&#xff0c;深拷贝&#xff01; Mat…

代码随想录算法训练营day56 583.两个字符串的删除操作 72.编辑距离

题目链接583.两个字符串的删除操作 class Solution {public int minDistance(String word1, String word2) {int len1 word1.length();int len2 word2.length();int[][] dp new int[len11][len22];for(int i 0; i <len1; i){dp[i][0] i;}for(int j 0; j <len2; j){…

正则表达式学习记录(Python)

正则表达式学习记录&#xff08;Python&#xff09; 一、特殊符号和字符 多个正则表达式匹配 &#xff08; | ) 用来分隔不同的匹配模式&#xff0c;相当于逻辑或&#xff0c;可以符合其中任何一个正则表达式 at | home # 表示匹配at或者home bat | bet | bit # 表示匹配bat或…

Java中的SPI机制与扫描class原理

文章目录 前言ClassLoaderJAVA SPI机制Spring SPI机制示例原理 如何加载jar包里的class 前言 Java的SPI机制与Spring中的SPI机制是如何实现的&#xff1f; ClassLoader 这里涉及到了class Loader的机制&#xff0c;有些复杂&#xff0c;jdk中提供默认3个class Loader&#x…

Dockerfile构建MySQL镜像

创建工作目录 [rootlocalhost ~]# mkdir mysql [rootlocalhost ~]# cd mysql/ 编写Dockerfile文件 [rootlocalhost mysql]# vim Dockerfile FROM centos:7 MAINTAINER Crushlinux <crushlinux163.com> #安装mariadb数据库 RUN yum install -y mariadb mariadb-server mar…

java与javaw运行jar程序

运行jar程序 一、java.exe启动jar程序 (会显示console黑窗口) 1、一般用法&#xff1a; java -jar myJar.jar2、重命名进程名称启动&#xff1a; echo off copy "%JAVA_HOME%\bin\java.exe" "%JAVA_HOME%\bin\myProcess.exe" myProcess -jar myJar.jar e…

AP AUTOSAR在软件定义汽车生态系统中的角色

AP AUTOSAR在软件定义汽车生态系统中的角色 AP AUTOSAR是AUTOSAR(汽车开放系统架构)的最新版本之一,它是一种面向服务的软件平台,旨在满足未来汽车电子系统的需求,特别是高性能计算、高带宽通信、软件无线更新(OTA)等方面。 AP AUTOSAR在软件定义汽车生态系统中扮演着…

【练手】自定义注解+AOP

在SpringBoot中实现自定义注解&#xff1a;( 声明注解的作用级别以及保留域 ) Target({ElementType.METHOD,ElementType.PARAMETER}) //注解的作用级别 Retention(RetentionPolicy.RUNTIME) //注解的保留域 public interface Log {int value() default 99; }在…

数据结构----异或

数据结构----异或 一.何处用到了异或 1. 运算符 //判断是否相同 用到了异或&#xff0c;看异或结果如果是0就是相同&#xff0c;不是0就是不同//注意&#xff1a; 不能给小数用&#xff0c;小数没有相等的概念&#xff0c;所以小数判断是否相同都是进行相减判断2.找一堆数中…

docker 部署mysql 5.6集群

docker搭建mysql的集群&#xff08;一主双从&#xff09; 1.拉取镜像 docker pull mysql:5.6 2.启动master容器 docker run -it -d --name mysql_master -p 3306:3306 --ip 192.168.162.100 \ -v /data/mysql_master/mysql:/var/lib/mysql \ -v /data/mysql_master/conf.d…

【无标题】云原生在工业互联网的落地及好处!

什么是工业互联网&#xff1f; 工业互联网&#xff08;Industrial Internet&#xff09;是新一代信息通信技术与工业经济深度融合的新型基础设施、应用模式和工业生态&#xff0c;通过对人、机、物、系统等的全面连接&#xff0c;构建起覆盖全产业链、全价值链的全新制造和服务…

eclipse常用快捷键

Eclipse常用快捷键 补全代码的声明&#xff1a;alt /快速修复: ctrl 1批量导包&#xff1a;ctrl shift o使用单行注释&#xff1a;ctrl /使用多行注释&#xff1a; ctrl shift /取消多行注释&#xff1a;ctrl shift \复制指定行的代码&#xff1a;ctrl alt down 或…

Scrum是什么意思,Scrum敏捷项目管理工具有哪些?

一、什么是Scrum&#xff1f; Scrum是一种敏捷项目管理方法&#xff0c;旨在帮助团队高效地开展软件开发和项目管理工作。 Scrum强调迭代和增量开发&#xff0c;通过将项目分解为多个短期的开发周期&#xff08;称为Sprint&#xff09;&#xff0c;团队可以更好地应对需求变…

微信小程序 width 100% 加 margin 或 padding 溢出屏幕

微信小程序 width 100% 加 margin 或 padding 溢出屏幕 方案1&#xff1a;fill-available margin方案2&#xff1a;box-sizing padding 方案1&#xff1a;fill-available margin width: 100%;width: -moz-available;width: -webkit-fill-available;width: fill-available;ma…

C#设计模式之---工厂方法模式

工厂方法模式&#xff08;Factory Method&#xff09; 工厂方法模式&#xff08;Factory Method&#xff09;的出现解决简单工厂中的难以拓展的问题&#xff0c;解决了其一旦添加新的产品&#xff0c;则需要修改简单工厂方法&#xff0c;进而造成简单工厂的实现逻辑过于复杂。…

聊聊混合动力汽车和纯电骑车的优势和劣势

混合动力汽车和纯电动骑车是两种不同的交通工具&#xff0c;它们都有各自的优势和劣势。本文将分别探讨混合动力汽车和纯电动骑车的优势和劣势&#xff0c;并为文章提供三个备选的好听的标题。 混合动力汽车是一种结合了内燃机和电动机的汽车&#xff0c;它可以同时利用燃油和电…

使用PHP和Redis实现简单秒杀功能

安装Redis 首先&#xff0c;需要在服务器上安装Redis。如果使用Linux系统&#xff0c;可以使用命令行安装。如果使用Windows系统&#xff0c;可以下载并安装Redis二进制文件。 创建Redis连接 在PHP中&#xff0c;可以使用Redis扩展来连接Redis服务器。需要在PHP文件中包含Re…

大数据课程G1——Hbase的概述

文章作者邮箱&#xff1a;yugongshiyesina.cn 地址&#xff1a;广东惠州 ▲ 本章节目的 ⚪ 了解HIve的概念&#xff1b; ⚪ 了解HIve与数据库的区别&#xff1b; ⚪ 了解HIve的特点&#xff1b; 一、简介 1. 概述 1. HBase原本是由Yahoo!公司开发后来贡献给了…

自己实现 OpenAI 的 /v1/embeddings 接口

自己实现 OpenAI 的 /v1/embeddings 接口 0. 背景1. 修改 .env 文件2. 修改 get_embedding 方法 0. 背景 使用 OpenAI 的 API Key 是需要付费的&#xff0c;为了节省成本&#xff0c;自己尝试实现 OpenAI 的各种接口。 本文章主要是实现 /v1/embeddings 和 /v1/engines/{mode…