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

创建vue插件，发布npm

news 2025/7/1 9:22:10

开发步骤：1.创建一个vue项目，2.开发一个组件。 3.注册成插件。 4.vite和package.json配置。5.发布到npm

１.创建一个vue项目

npm create vue@latest

生成了vue项目之后，得到了以下结构。

在src下创建个plugins目录。用于存放开发的插件。

2.开发一个组件

（1）现在可以开发插件了。在plugins目录下创建一个vue组件。TestButton.vue如下：

<template><div><button>插件中的按钮</button></div>
</template><script lang='ts' setup ><script>

3.注册成插件

在plugins目录下创建一个install.ts。用于注册组件。注册组件需要导出个install方法。将组件注册到app中。具体可以参照vuejs官网。

import TestButton from "./TestButton.vue"export default {install: (app:any){app.compontent(TestButton.name,TestButton)}
}

4.vite和package.json配置

（1）配置vite。指定打包的入口文件，以及输出。


import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'// https://vite.dev/config/
export default defineConfig({// 用于构建 build:{lib:{// 构建的入口。这里需要设置为刚才创建的plugins下的install.tsentry:"./src/plugins/install.ts",name:"TestUI",fileName: (format) => `TestUI.${format}.js`, // 输出文件名// 使用的打包模式formats:["umd"],},rollupOptions:{// 将 Vue 标记为外部依赖external:['vue'], output:{globals:{vue:"Vue" // 在 UMD 构建中，Vue 被认为是全局变量}}}},plugins: [vue(),vueDevTools(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},
})

（2）进行打包

npm run build

（3）配置package.json。

{"name": "TestUI","version": "1.0.25","private": false,"type": "module",// 入口文件，设置为上一步打包完成后生成的js文件"main": "./dist/ysjui.umd.cjs", "module": "./dist/ysjui.umd.cjs",// 指定dist和lib发布到npm包中"files": ["dist","lib"],"author": {"name": "xxx"},// 其他的配置项...
}

5.发布至npm