构建npm包

使用vite创建一个vue项目

npm create vite
# Project name: test-btn
# Select a framework: vue
# Select a variant: vue
cd vue
npm i

在 components 目录下创建一个 TestBtn.vue 组件

<template>
  <button>我是测试要发布的按钮组件</button>
</template>

<script>
export default {
  name: 'test-btn'
}
</script> 

在 src 目录下创建一个 index.js

//index.js
import TestBtn from "./components/TestBtn.vue"; // 引入封装好的组件

export { TestBtn } //实现按需引入*


const components = [TestBtn];
const install = function(App, options) {
    components.forEach((component) => {
        App.component(component.name,component);
    });
};
export default { install } // 批量的引入*

修改 vitee.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.js'),
      name: 'TestBtn',
      fileName: (format) => `test-btn.${format}.js`
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

修改 package.json

{
  "name": "test-btn-ui",
  "version": "0.0.1",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "files": [
    "dist"
  ],
  "main": "./dist/test-btn.umd.js",
  "module": "./dist/test-btn.es.js",
  "exports": {
    ".": {
      "import": "./dist/test-btn.es.js",
      "require": "./dist/test-btn.umd.js"
    }
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "vite": "^2.9.9"
  }
}

打包

使用 npm run build 生成 dist 文件(注意修改 .gitignore 文件，需要提交 dist 文件)，提交到 github 或 gitee。

使用构建的包

在 package.json 中添加依赖

在 package.json 中的 devDependencies 下添加 "test-btn": "git+https://gitee.com/narcissus209/test-btn.git"

  ...
  "devDependencies": {
    "test-btn": "git+https://gitee.com/narcissus209/test-btn.git",
    ...
  }

在 App.vue 中局部引入

<template>
  <!-- 如果是全局引入需要使用中线连接，如果是局部引入可以使用驼峰命名 -->
  <test-btn />
</template>

<script setup>
import { TestBtn } from 'test-btn'
</script>

在 main.js 中全局引入

import { createApp } from 'vue'
import App from './App.vue'
import TestBtn from 'test-btn'

const app = createApp(App)
app.use(TestBtn)

app.mount('#app')