创建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
相关推荐
遂心_9 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark9 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
遂心_10 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy10 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy10 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼10 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
一个不爱写代码的瘦子11 小时前
迭代器和生成器
前端·javascript
洋葱头_12 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing12 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
源猿人14 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化