npm多组件发布Vue3+TS版本，快来像Antd一样搭建属于你的UI库吧

快来体验一下，或者给个star吧

javascript 复制代码

lintaibai

备用命令

javascript 复制代码

npm version patch  # 增加补丁版本
npm version minor  # 增加次版本
npm version major  # 增加主版本

npm version patch -m "xx"

1、多包发布的命名

之前我们都是简单上传一个npm包，但是项目之中多个组件包的时候如何发布呢

这个时候建议建立一个空间，然后把所有包都放到自己的命名空间下,方便使用管理

接下来我们就将多个组件封装到一个 npm 包中，并提供一个清晰的 API 供用户使用

需要注意我们发布多包的时候命名有所不同，比如我的包名字为

javascript 复制代码

@lintaibai/ValidCode


@符号后面的是你注册npm账户时的username
@符号管理多个包

2、项目搭建

接下来我将带你手把手实现多包发布

我本地环境，这里建议大家尽量Node版本使用偶数，奇数大部分默认为不稳定的版本

javascript 复制代码

v22.16.0

🍎搭建项目

这里我们使用的为Vite+Vue3这一套,首次目标是兼容vue3后续是Vue2\React19

javascript 复制代码

npx create-vite@latest NexusNpm --template vue-ts

// 选择对应的name即可

我们多包发布的目录结构如下，把其中没必必要的东西删除掉

javascript 复制代码

把其中没必必要的东西删除掉


📦src
 ┣ 📂components
 ┃ ┣ 📂Pagination
 ┃ ┃ ┗ 📜index.vue
 ┃ ┗ 📂ValidCode
 ┃ ┃ ┗ 📜index.vue
 ┣ 📂plugins
 ┃ ┗ 📜index.ts
 ┣ 📜App.vue
 ┣ 📜index.ts
 ┣ 📜main.ts
 ┗ 📜vite-env.d.ts
  package.json
  tsconfig.json
  vite.config.ts

🍎安装依赖

javascript 复制代码

yarn add @types/node

yarn add path

🍎配置组件

javascript 复制代码

// src\components\Pagination\index.vue
<template>
<div class="pagination">我是分页组件</div> 
</template>


<script setup name="Pagination">
import { ref, onMounted } from 'vue';

</script>

<style scoped>
.pagination{
  background-color: cadetblue;
  color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 20px;
}
</style>



// src\components\ValidCode\index.vue

<template>
<div class="ValidCode">我是ValidCode组件</div> 
</template>

<script setup name="ValidCode">
import { ref, onMounted } from 'vue';
</script>

<style scoped>
.ValidCode{
  background-color: cadetblue;
  color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 20px;
}
</style>

🍎配置`vite.config.ts`

javascript 复制代码

// 默认依赖
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'
// 使用依赖

// https://vite.dev/config/
export default defineConfig({
  base: '/',
  plugins: [vue()],
  resolve: {
        alias: {
            // 配置 src 目录的别名 @
            "@": path.resolve(__dirname, './src'),
            "@/": path.resolve(__dirname, './src/'),
        }
    },
  build: {
    outDir: "dist", // 打包后输出目录名称
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'), // 库的入口文件
      name: 'lintaibai', // 全局变量名（UMD 格式时使用）
      fileName: (format) => `lintaibai.${format}.js` // 输出文件名格式,对应成自己的
    },
    rollupOptions: {
      // 外部化 Vue，不打包进库，这个配置可以缩减我们的包大小
      external: ['vue'],
      output: {
        // 为外部化的依赖提供全局变量
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

🍎 配置`pakeage.json`

javascript 复制代码

{
  "name": "lintaibai",
  "private": false,
  "version": "0.0.6",
  "type": "module",
  "main": "dist/lintaibai.umd.js",
  "module": "dist/lintaibai.es.js",
  "exports": {
    ".": {
      "import": "./dist/lintaibai.es.js",
      "require": "./dist/lintaibai.umd.js"
    },
    "./dist/style.css": {
      "import": "./dist/lintaibai.css",
      "require": "./dist/lintaibai.css"
    }
  },
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@types/node": "^24.3.0",
    "path": "^0.12.7",
    "vue": "^3.5.18"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.1",
    "@vue/tsconfig": "^0.7.0",
    "typescript": "~5.8.3",
    "vite": "^7.1.2",
    "vue-tsc": "^3.0.5"
  }
}

🍎 配置`tsconfig.json`

javascript 复制代码

{
  "compilerOptions": {
    "baseUrl": ".",// 解析非相对模块名称的基准目录
    "paths": {
      "@/*": ["src/*"], // 配置 @/* 解析为 src/*
      "@/": ["src/"],
      "@": ["src"]
    }, // 配置模块解析
    "incremental": false, // 增量编译
    "noEmit": true, // 不生成输出文件
    "composite": false, // 增量编译  true启用 false禁用 启用会生成一个.tsbuildinfo 文件
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

3、项目发布

🍎包导入导出

根目录下main.ts

javascript 复制代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import "./index.ts"
createApp(App).mount('#app')

根目录下index.ts

javascript 复制代码

// 安装函数，用于全局注册
import Pagination  from './components/Pagination/index.vue'
import ValidCode from './components/ValidCode/index.vue'
// 默认导出 install 方法
export {
  Pagination,
  ValidCode
}

🍎打包发布

javascript 复制代码

// 打包
yarn build 

// 登录
npm login 

//部署 
npm publish

//部署  (@命名的才需要，私人部署需要收费)
npm publish --access=public

🍎安装使用

javascript 复制代码

// 安装

npm i lintaibai

或者

yarn add lintaibai

或者

cnpm install lintaibai

或者

pnpm install lintaibai
  

// 安装  
局部引入 （推荐）
import { Pagination,ValidCode} from 'lintaibai'
import 'lintaibai/dist/style.css'

<ValidCode/>

4、优化-非必要

这部分优化主要是为了我们可以全局引入，也可以按需引用

🍎功能

src\plugins\index.ts

javascript 复制代码

// src\plugins\index.ts

/* 导入类型 */
import {App} from 'vue'

/* 导入组件 */
import Pagination from "@/components/Pagination/index.vue"
import ValidCode from "@/components/ValidCode/index.vue"

/* 所有组件组成的对象 */
const components= {
    ValidCode,
    Pagination
}
/**
 * 将所有组件注册为全局组件的插件
 */
const linlele = {
    install(app: App): void {
        // 获取全局组件组成的对象中所有的 key，遍历 key 逐个注册全局组件
        Object.keys(components).forEach((componentName: string): void => {
            app.component(componentName, components[componentName])
        })
    }
}

export default linlele //导出将所有组件注册为全局组件的插件

src\index.ts

javascript 复制代码

import linlele from './plugins/index'

// 安装函数，用于全局注册
import Pagination  from './components/Pagination/index.vue'
import ValidCode from './components/ValidCode/index.vue'

// 默认导出 install 方法
export {
  linlele,
  Pagination,
  ValidCode
}

🍎使用

javascript 复制代码

import { linlele } from 'lintaibai'

npm多组件发布Vue3+TS版本，快来像Antd一样搭建属于你的UI库吧