创建vue插件，发布npm

ysj-1212024-11-17 8:41

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

１.创建一个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