创建vue插件,发布npm

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

1.创建一个vue项目

bash 复制代码
npm create vue@latest

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

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

2.开发一个组件

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

html 复制代码
<template>
    <div>
        <button>插件中的按钮</button>
    </div>
</template>

<script lang='ts' setup >
    
<script>

3.注册成插件

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

TypeScript 复制代码
import TestButton from "./TestButton.vue"

export default {
    install: (app:any){
        app.compontent(TestButton.name,TestButton)
    }
}

4.vite和package.json配置

(1)配置vite。指定打包的入口文件,以及输出。

javascript 复制代码
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.ts
      entry:"./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)进行打包

bash 复制代码
npm run build

(3)配置package.json。

TypeScript 复制代码
{
  "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

TypeScript 复制代码
npm publish
相关推荐
未来之窗软件服务1 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
牧杉-惊蛰3 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木3 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js
FuckPatience3 小时前
前后端分离项目部署完成后 前后端交互过程
vue.js·asp.net
CoderYanger3 小时前
前端基础-HTML入门保姆级课堂笔记
前端·javascript·css·html
赛博切图仔3 小时前
qiankun、micro-app、wujie,2025年我们该选谁?
前端·javascript
LuckySusu3 小时前
【vue篇】Vue 自定义指令完全指南:从入门到高级实战
前端·vue.js
LuckySusu3 小时前
【vue篇】Vue 响应式核心:依赖收集机制深度解密
前端·vue.js
LuckySusu3 小时前
【vue篇】Vue.js 2025:为何全球开发者都在拥抱这个前端框架?
前端·vue.js
LuckySusu3 小时前
【vue篇】Vue 单向数据流铁律:子组件为何不能直接修改父组件数据?
前端·vue.js