创建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
相关推荐
H尗2 分钟前
Vue3响应式系统的精妙设计:深入理解 depsLength 与 trackId 的协同艺术
前端·vue.js
sanzk13 分钟前
Node.js | pnpm下载安装与环境配置
npm
爱宇阳15 分钟前
npm 常用标签与使用技巧新手教程
前端·npm·node.js
郑板桥3016 分钟前
TypeScript:npm的types、typings、@type的区别
javascript·typescript·npm
JinSoooo18 分钟前
pnpm monorepo 联调:告别 --global 参数
开发语言·javascript·ecmascript·pnpm
@大迁世界20 分钟前
2025 年该选谁?npm vs yarn vs pnpm
前端·npm·node.js
crary,记忆21 分钟前
简介NPM 和 NPX
前端·学习·npm·node.js
wocwin22 分钟前
解决qiankun微前端Vue2+Element-ui主应用跳转到Vue3+Element-plus子应用样式冲突问题
vue.js
郝学胜-神的一滴1 小时前
Cesium绘制线:从基础到高级技巧
前端·javascript·程序人生·线性代数·算法·矩阵·图形渲染
快乐非自愿2 小时前
Vue 缓存之坑,变量赋值方式和响应式数据
前端·vue.js·缓存