创建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
相关推荐
前端农民工ws43 分钟前
Vue 框架的 markdown 渲染组件,针对 AI 的 markdown 流式传输场景
前端·javascript·vue.js·ai
百思可瑞教育1 小时前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
星语卿3 小时前
Vuetify:构建优雅Vue应用的Material Design组件库
前端·javascript·vue.js
wangbing11253 小时前
界面规范11-对话框
javascript·vue.js·elementui
不一样的少年_3 小时前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码(附源码)
前端·vue.js·设计模式
一枚前端小能手3 小时前
🔥 滚动监听写到手抽筋?IntersectionObserver让你躺平实现懒加载
前端·javascript
我是日安3 小时前
从零到一打造 Vue3 响应式系统 Day 5 - 核心概念:单向链表、双向链表
前端·vue.js
遂心_3 小时前
React中的onChange事件:从原理到实践的全方位解析
前端·javascript·react.js
GHOME3 小时前
原型链的原貌
前端·javascript·面试
槿泽4 小时前
Vue集成Electron目前最新版本
前端·vue.js·electron