vue 发布自己的npm组件

news/2024/12/29 11:10:06/

1、在项目任意位置创建index.ts文件
2、导入要到处的组件,使用vue提供的install 功能全局挂在;

import GWButton from "@/views/GWButton.vue";
import GWAbout from "@/views/AboutView.vue";const components = {GWButton,GWAbout,
};function install(Vue: any) {const keys = Object.keys(components);keys.forEach((name) => {// eslint-disable-next-line @typescript-eslint/ban-ts-comment// @ts-ignoreconst component = components[name];Vue.component(component.name || name, component);});
}export default {install,...components,
};

3、package.json中添加如下命令
完整代码

{"name": "gw-components","version": "0.1.0","private": false,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","test:unit": "vue-cli-service test:unit","test:e2e": "vue-cli-service test:e2e","lint": "vue-cli-service lint","package": "vue-cli-service build --target lib --dest lib src/components/index.ts"},"main": "lib/gw-components.umd.min.js","dependencies": {"axios": "^1.6.6","core-js": "^3.8.3","element-plus": "^2.5.3","lodash": "^4.17.21","register-service-worker": "^1.7.2","vue": "^3.2.13","vue-class-component": "^8.0.0-0","vue-router": "^4.0.3","vuex": "^4.0.0"},
  • 将private设置为false,否则无法发布到npm
  • 将name修改为我们的组件库的名字
  • version为组件库的版本,每次打包发布注意都要更新
  • 增加main为lib/like-ui.umd.min.js,我们组件库打包好的入口文件。 build:like-ui命令中
  • –target 允许将项目中的任何组件构建为库或Web组件。
  • –dest 打包后的输出文件夹
  • 最后就是我们组件库的入口文件src/components/index.js

4、配置完成后,进行打包
打包后会生成如下文件

npm run package

在这里插入图片描述
5、上传npm

1、)登陆NPM,输入账号密码

npm login

2)、发布

//这里我上传的私服,上传公网步骤一样;
npm publish --registry http://xx.xx.xx.xx:4873

5、在另一个项目中使用

//使用npm 下载
npm install gw-components@0.1.0

在main.ts 中挂载

import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignorey
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignorey
import GWComponents from "gw-components";
import "gw-components/lib/gw-components.css";createApp(App).use(store).use(router).use(GWComponents).use(ElementPlus).mount("#app");

在组件中直接使用即可

<template><div class="home"><GWButton></GWButton></div>
</template><script lang="ts">
import { Options, Vue } from "vue-class-component";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src@Options({components: {HelloWorld,},
})
export default class HomeView extends Vue {}
</script>

http://www.ppmy.cn/news/1340541.html

相关文章

C++学习Day01之namespace命名空间

目录 一、程序及输出1.1 命名空间用途&#xff1a; 解决名称冲突1.2 命名空间内容1.3 命名空间必须要声明在全局作用域下1.4 命名空间可以嵌套命名空间1.5 命名空间开放&#xff0c;可以随时给命名空间添加新的成员1.6 命名空间可以是匿名的1.7 命名空间可以起别名 二、分析与总…

MySQL EXPLAIN查询执行计划

EXPLAIN 可用来查看SQL执行计划&#xff0c;常用来分析调试SQL语句&#xff0c;来使SQL语句达到更好的性能。 1 前置知识 在学习EXPLAIN 之前&#xff0c;有些基础知识需要清楚。 1.1 JSON类型 MySQL 5.7及以上版本支持JSON数据类型。可以将数组存为JSON格式的字符串&#…

unity3d的海盗王白银城演示

这是一个外网上的下载的海盗王unity3d制作的白银城演示场景。 地图只含有白银城区&#xff0c;没有野外和怪物。 当然也没有服务器端的。 我对灯光、摄像头、天空背景等做过调整&#xff0c;使它显示起来比较鲜丽。 它的模型和贴图是直接拿了海盗的&#xff0c;没有做过优化调整…

Spring Cloud Gateway 修改请求体、响应体

前言 例行每半年一次的工作轮换&#xff0c;接手了同事的网关服务 年底了工作不是很忙&#xff0c;看了下前人的代码&#xff0c;虽然都能读懂&#xff0c;但感觉应该可以再优雅一点 于是把网关的相关知识又翻阅了一下 官方资料 PS&#xff1a;这里如果按新方案调整的话&#…

2024美赛数学建模F题思路分析 - 减少非法野生动物贸易

1 赛题 问题F&#xff1a;减少非法野生动物贸易 非法的野生动物贸易会对我们的环境产生负面影响&#xff0c;并威胁到全球的生物多样性。据估计&#xff0c;它每年涉及高达265亿美元&#xff0c;被认为是全球第四大非法交易。[1]你将开发一个由数据驱动的5年项目&#xff0c;…

双非本科准备秋招(14.1)—— 力扣刷题

今天做两个有点难度的题。 1、295. 数据流的中位数 手写堆实现&#xff1a; 加入元素&#xff1a; 如何维护一个中位数&#xff1f;我们考虑一下堆的特点&#xff0c;大顶堆堆顶是一个最大值&#xff0c;小顶堆堆顶是一个最小值&#xff0c;那么&#xff0c;如果我们可以把数…

jenkins 下载插件sentry-cli失败 证书过期

现状 npm set ENTRYCLI_CDNURLhttps://cdn.npm.taobao.org/dist/sentry-cli npm set sentrycli_cdnurlhttps://cdn.npm.taobao.org/dist/sentry-cli 原因是npm原域名停止解析&#xff0c;在访问上面sentry-cli的cdn资源的时候 证书过期无法下载。 解决&#xff1a; 替换证书过期…

代码随想录算法训练营29期Day37|LeetCode 738,968

文档讲解&#xff1a;单调递增的数字 监控二叉树 贪心算法总结 738.单调递增的数字 题目链接&#xff1a;https://leetcode.cn/problems/monotone-increasing-digits/description/ 思路&#xff1a; 题目要求小于等于N的最大单调递增的整数&#xff0c;那么拿一个两位的数字…