使用vite构建Vue3组件库，发布npm包

news2025/7/8 19:29:28

使用vite构建Vue3组件库，发布npm包

在国内用vue框架开发的是非常之多的，使用vue开发组件封装是一个很普片的事情了，封装好一个组件可以在项目的任意地方去使用，我们还可以从npm仓库下载别人封装的组件进行使用，比如element-ui,vant等组件库，但是由于不同的公司，不同的网站风格，是我们在开发中还是得自己封装自己的组件，要想在不同项目上使用自己封装的组件，不可能去旧项目复制组件代码到新的项目里面去。所以我们可以将组件上传到npm仓库，使用的时候直接从npm安装使用。

1.创建基础的vite 脚手架

npm create vite  vite-demo(项目名称) --template vue

然后如下图所示，项目名为vite-demo 然后选择vue框架，选择vue

在这里插入图片描述

2.改造vite-dome

创建好基本项目后，用自己熟悉的编程软件打开羡慕，在控制台输入npm i安装相关的包并对文件进行改造

如下图：
在这里插入图片描述

3.组件封装

3.1创建组件文件

在src\components文件加下新建一个muk-ui用于存放所有的组件文件，在muk-ui文件夹中创建一个button组件如图所示

在这里插入图片描述

3.2编写组件

注意这里我是用了less布局，所以要下载less包，npm i less安装less包。要想后面导出的时候使用name属性，必须定义name属性，由于setup语法糖不支持定义name属性，所以我们可以定义两个script标签，也可以不用setup语法糖，还可以使用插件解决，这里就不说是什么插件了，放个连接自己去看

<script setup>
/**
 * 接收传过来的值
 *
 * @param size 定义按钮的大小 可选值为 'large' | 'middle' | 'small' | 'mini'
 * @param type 定义按钮的类型 默认不填
 */
defineProps({
	size: {
		type: String,
		default: "middle",
	},
	type: {
		type: String,
		default: "default",
	},
});
</script>
<script>
export default {
	name: "MukButton",
};
</script>

<template>
	<button class="muk-btn" :class="[size, type]">
		<!-- 定义插槽用于让用户自定义按钮你们的内容 -->
		<slot></slot>
	</button>
</template>

<style scoped lang="less">
.muk-btn {
	appearance: none;
	border: none;
	outline: none;
	background: #fff;
	text-align: center;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
}

.large {
	width: 240px;
	height: 50px;
	font-size: 16px;
}

.moddle {
	width: 180px;
	height: 50px;
	font-size: 16px;
}

.small {
	width: 100px;
	height: 32px;
}

.mini {
	width: 60px;
	height: 32px;
}

.default {
	border-color: #e4e4e4;
	color: #666;
}

.primary {
	border-color: skyblue;
	background: skyblue;
	color: #fff;
}

.plain {
	border-color: skyblue;
	color: skyblue;
	background: lighten(skyblue, 50%);
}

.gray {
	border-color: #ccc;
	background: #ccc;
	color: #fff;
}
</style>

3.3导出组件

在src\components\muk-ui文件夹下新建index.js用于导出组件

import Button from "./button/index.vue";

// 按需引入
export { Button };

const component = [Button];

const MukUI = {
	install(App) {
		component.forEach((item) => {
			App.component(item.name, Button);
		});
	},
};

export default MukUI;

3.4本地验证组件是否用

在sec\main.js注册组件

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import MukUI from "./components/muk-ui"; //导入

const app = createApp(App);
app.use(MukUI); //注册
app.mount("#app");

在src\App.vue里面去使用按钮

<script setup></script>

<template>
	<MukButton size="large" type="primary">我是测试组件</MukButton>
</template>

<style scoped></style>

然后在终端输入npm run dev运行 如图所示就成功了

在这里插入图片描述

3.5 配置vite.config.js文件

在项目的根目录的vite.config.js修改相关配置，修改成组件库打包模式，

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
	plugins: [vue()],
	build: {
		outDir: "muk-ui", //输出文件名称
		lib: {
			entry: path.resolve(__dirname, "./src/components/muk-ui/index.js"), //指定组件编译入口文件
			name: "muk-ui",
			fileName: "muk-ui",
		}, //库编译模式配置
		rollupOptions: {
			// 确保外部化处理那些你不想打包进库的依赖
			external: ["vue"],
			output: {
				// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
				globals: {
					vue: "Vue",
				},
			},
		}, // rollup打包配置
	},
});

3.6运行打包命令

在终端使用npm run build 如下图所示出现以下文件就打包成功了

在这里插入图片描述

4.上传到npm官网

4.1打包上传前的准备

上传之前我们要做一些配置准备的

4.1.1配置package.json

首先我们在打包好的muk-ui目录下，打开终端，然后执行npm init -y命令初始化package.json

package.json是用来配置我们上传到npm仓库的的版本号等配的

初始化后我们可以看到到该目录下的一些基本配置

在这里插入图片描述

然后我们修改配置如下：

{
	"name": "muk-ui", //包名字
  	"private": false, 
	"version": "0.0.1", //版本号
	"description": "一个简单的组件库",
	"main": "muk-ui.js",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1"
	},
	"keywords": ["muk","muk-ui","MukUI","MUKUI","vue3-muk-ui"],//在npm上可被搜索的关键字
	"author": "",
	"license": "ISC"
}

4.2上传到npm

4.2.1 注册npm账号

想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。

在这里插入图片描述

4.2.2设置npm源

在国内很多小伙伴喜欢把本地的npm镜像源采用的是淘宝镜像源或者其它的，如果想要发布npm包，我们得吧我们得npm源切换为官方得源，命令如下：

npm config set registry=https://registry.npmjs.org
4.2.3登录到npm

在打包后的文件根目录打开终端，输入npm login登录到官网

完成如下图步骤就成功登陆了

在这里插入图片描述

4.2.4推送到npm仓库

输入npm publish就可以正式发布到npm仓库了

在这里插入图片描述

注意：发布前要保证没有相同的包名，否则无法发布，每次发布的版本号必须不同

输入临时验证码后回车看到如下图所示就证明成功了

在这里插入图片描述

注意：发布前要保证没有相同的包名，否则无法发布，每次发布的版本号必须不同

4.2.5查看npm包

上传成功后可以在npm官网上通过自己设置的keywords关键字查到自己上传的组件

在这里插入图片描述

4.3下载与使用

4.3.1下载

通过npm i muk-ui下载我们npm仓库的包如图所示就下载成功了

在这里插入图片描述

就可以在node_modules文件夹下找到我们的组件包

在这里插入图片描述

4.3.2使用组件

  1. 在src\main.js中引入下载的包，并引入其样式import "../node_modules/muk-ui/style.css";

    import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import "../node_modules/muk-ui/style.css"; //引入组件样式
import MukUI from "muk-ui"; //引入下载后的组件

const app = createApp(App);
app.use(MukUI); //注册
app.mount("#app");

  2. 在src\App.vue下去使用

    <script setup></script>

<template>
	<MukButton size="large" type="primary">我是测试组件</MukButton>
</template>

<style scoped></style>

  3. 使用npm run dev启动项目查看效果，如下图所示就证明成功了

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于Java+Springboot+vue高校资源共享交流平台设计和实现

基于Java+Springboot+vue高校资源共享交流平台设计和实现

博主介绍&#xff1a;✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…
阅读更多...
【完整代码】用HTML/CSS制作一个美观的个人简介网页

【完整代码】用HTML/CSS制作一个美观的个人简介网页

【完整代码】用HTML/CSS制作一个美观的个人简介网页整体结构完整代码用HTML/CSS制作一个美观的个人简介网页——学习周记1HELLO&#xff01;大家好&#xff0c;由于《用HTML/CSS制作一个美观的个人简介网页》这篇笔记有幸被很多伙伴关注&#xff0c;于是特意去找了之前写的完整…
阅读更多...
web前端框架——Vue的特性

web前端框架——Vue的特性

目录 前言&#xff1a; 一.vue 二.特性 1.轻量级 2.数据绑定 3.指令 4.插件 三.比较Angular 、React 、Vue 框架之间的比较 1. Angular Angular的优点&#xff1a; 2. React React 的优点&#xff1a; 3.vue 3.Vue的优点&#xff1a; 前言&#xff1a; 本篇文章…
阅读更多...
【Vue】初识Vue，Vue简介及Vue Devtools配置

【Vue】初识Vue，Vue简介及Vue Devtools配置

目录1. Vue是什么2. Vue的特点3. Vue的引入方式4. 安装Vue Devtools5. 第一个Vue案例1. Vue是什么 关于这个问题官方给了我们答案&#xff1a; 一套用于构建用户界面的渐进式JavaScript框架 渐进式框架是指我们可以在项目中一点点来引入和使用Vue&#xff0c;而不一定需要全部…
阅读更多...
【vue2】使用vue常见的业务流程与实现思路

【vue2】使用vue常见的业务流程与实现思路

&#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;vue的业务处理思路。前台数据渲染与后台的增删改查操作 【前言】当大家会点开这一篇文章…
阅读更多...
手把手教你基于HTML、CSS搭建我的相册（下）

手把手教你基于HTML、CSS搭建我的相册（下）

The sand accumulates to form a pagoda⭐ 写在前面⭐ 相册中心部分⭐ 添加照片⭐ 图片展示样式⭐ 搭建底部版权模块⭐ 写在最后⭐ 写在前面 经常有一些粉丝咨询前端该从什么开始学&#xff0c;那当然是我们的前端基础三件套开始学起&#xff0c;HTML、CSS、javaScript&#x…
阅读更多...
Java Web 实战 15 - 计算机网络之网络编程套接字

Java Web 实战 15 - 计算机网络之网络编程套接字

文章目录一 . 网络编程中的基本概念1.1 网络编程1.2 客户端(client) / 服务器(server)1.3 请求(request) / 响应(response)1.4 客户端和服务器之间的交互数据1.4.1 一问一答1.4.2 多问一答1.4.3 一问多答1.4.4 多问多答二 . socket 套接字2.1 UDP 的 Socket API2.1.1 引子2.1.2…
阅读更多...
网络安全工具大合集

网络安全工具大合集

还是一句话&#xff0c;功夫再高&#xff0c;也怕菜刀首先&#xff0c;恭喜你发现了宝藏。本文章集成了全网优秀的开源攻防武器项目&#xff0c;包含&#xff1a;信息收集工具&#xff08;自动化利用工具、资产发现工具、目录扫描工具、子域名收集工具、指纹识别工具、端口扫描…
阅读更多...
为什么说网络安全是风口行业？是IT行业最后的红利？

为什么说网络安全是风口行业？是IT行业最后的红利？

前言 “没有网络安全就没有国家安全”。当前&#xff0c;网络安全已被提升到国家战略的高度&#xff0c;成为影响国家安全、社会稳定至关重要的因素之一。 网络安全行业特点 1、就业薪资非常高&#xff0c;涨薪快 2021年猎聘网发布网络安全行业就业薪资行业最高人均33.77万&…
阅读更多...
2023最新高频前端面试题总结（附答案）

2023最新高频前端面试题总结（附答案）

目录 1.vue双向数据绑定的原理&#xff1f; 2.vue的生命周期有哪些 3.v-if 和v-show有什么区别&#xff1f; 4.async await 是什么&#xff1f;它有哪些作用&#xff1f; 5、数组常用的方法&#xff1f;哪些方法会改变原数组&#xff0c;哪些不会 6.什么是原型链&#xf…
阅读更多...
脱不下孔乙己的长衫，现代的年轻人该怎么办？

脱不下孔乙己的长衫，现代的年轻人该怎么办？

“如果我没读过书&#xff0c;我还可以做别的工作&#xff0c;可我偏偏读过书” “学历本该是我的敲门砖&#xff0c;却成了我脱不下的长衫。” 最近&#xff0c;“脱下孔乙己的长衫”在网上火了。在鲁迅的原著小说中&#xff0c;孔乙己属于知识阶级&#xff08;长衫客&#xf…
阅读更多...
国产ChatGPT大战弱智吧效果实测！网页端小程序均已上线，人人可玩

国产ChatGPT大战弱智吧效果实测！网页端小程序均已上线，人人可玩

杨净 萧箫 发自 凹非寺量子位 | 公众号 QbitAI“中国版ChatGPT首发”&#xff0c;争得不可开交&#xff0c;热闹却一直没个结果——自ChatGPT发布以来&#xff0c;目前进展最快的国内产品也仅是开启了内测&#xff0c;不知道啥时候才能玩上。结果现在有读者跟我们爆料&#xff…
阅读更多...
Vue3+TypeScript项目报错: 找不到名称“require”。是否需要为节点安装类型定义?

Vue3+TypeScript项目报错: 找不到名称“require”。是否需要为节点安装类型定义?

Vue3TypeScript项目编写代码时报错&#xff1a;找不到名称“require”。是否需要为节点安装类型定义?请尝试使用 npm i --save-dev types/node。 描述&#xff1a;今天在开发项目时&#xff08;项目框架为Vue3TypeScript&#xff09;需要 动态引入静态资源&#xff0c;也就是…
阅读更多...
Vue--Router--嵌套路由(children)的用法

Vue--Router--嵌套路由(children)的用法

原文网址&#xff1a;Vue--Router--嵌套路由(children)的用法_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍Vue Router的嵌套路由的用法。 嵌套路由就是父路由里面嵌套他的子路由&#xff0c;父路由有自己的路由导航和路由容器&#xff08;router-link、router-view&#x…
阅读更多...
ChatGPT能否取代程序员？

ChatGPT能否取代程序员？

目录ChatGPT能否取代程序员&#xff1f;ChatGPT和程序员的工作内容和工作方式ChatGPT和程序员的共同点程序员的优势程序员的实力ChatGPT和程序员的关系结论惊喜ChatGPT能否取代程序员&#xff1f; ChatGPT是一种非常普遍的人工智能&#xff08;AI&#xff09;系统&#xff0c;…
阅读更多...
chatGPT的49种应用场景，双AI生成二次元仙女，及各开发语言对接chatGPT参考指南

chatGPT的49种应用场景，双AI生成二次元仙女，及各开发语言对接chatGPT参考指南

前沿 可能有人在问我&#xff0c;勇哥为什么chatGPT都被微信下架了&#xff0c;你还要写相关的chatGPT的文章呢&#xff1f;其实我们先不论微信下架的原因&#xff0c;单说chatGPT的达芬奇模型给勇哥带来的科技感早就超越了一切&#xff0c;所以勇哥依旧决定连续熬两个夜为大家…
阅读更多...
mapbox使用教程

mapbox使用教程

文章目录mapbox前期准备创建,显影,删除图层,图层样式layers-type常用类型sources-type常用类型地图创建点地图创建图片、图标地图创建文字标注&#xff08;标题&#xff09;地图创建面&#xff0c;线给指定图层添加自定义弹出框地图创建容器绘制echarts/hightcharts图表地图平滑…
阅读更多...
300秒带你手写一个promise

300秒带你手写一个promise

前言 为什么要写这一篇文章&#xff1f; 加深对promise的理解&#xff0c;以及再实际工作中的灵活运用。知其然&#xff0c;知其所以然。面试需要。&#xff08;重点&#xff01;&#xff01;&#xff01;&#xff09; 1:声明promise 首先我们先来聊聊promise的几个特性&am…
阅读更多...
【node.js从入门到精通】使用node.js写入读取文件内容，基础方法使用

【node.js从入门到精通】使用node.js写入读取文件内容，基础方法使用

目录 前言 读取文件内容 判断文件是否读取成功 使用writeFile写入文件内容 整理数据 路径动态拼接处理问题 path.basename使用 获取路径中扩展名文件 写在最后 前言 Node.js是一个基于Chrome V8引擎的JavaScript运行环境。 区分版本号 LTS为长期稳定版&#xff0c;推…
阅读更多...
大数据 │ ECharts与pyecharts数据可视化应用

大数据 │ ECharts与pyecharts数据可视化应用

通过本篇了解ECharts与pyecharts数据可视化的特点&#xff0c;能实现简单的ECharts与pyecharts数据可视化操作。 01、pyecharts数据可视化介绍 pyecharts是一个用于生成 Echarts 图表的类库&#xff0c;是一款将Python与ECharts相结合的强大的数据可视化工具&#xff0c;使用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023