使用vite构建Vue3组件库

1. 首先在`src`需要创建一个 `packages` 目录，用来存放组件

2. 在`packages`目录下创建组件HbPages

<script lang="ts" setup>
...
</script>
<script lang="ts">
export default {
  name: 'HbPages'
}
</script>

3. 在`src\packages`文件夹下新建`index.js`用于导出组件

// 引入封装好的组件
import HbLicenseApply from './hb-license-apply/index.vue'
import HbLicenseView from './hb-license-view/index.vue'
import HbPages from './hb-pages/index.vue'

const components = [HbLicenseApply, HbLicenseView, HbPages]
// 导出组件
export const HBVue3UI = {
  install(App) {
    components.forEach(component => {
      App.component(component.name, component)
    })
  }
}
// 导出初始化方法
export function initConfig({ url, token }) {
  sessionStorage.setItem('hb-vue3-url', url)
  sessionStorage.setItem('hb-vue3-token', token)
}

4. 本地验证组件是否能用

在main.js注册组件

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
//本地测试
import { HBVue3UI } from '@/package'
//线上使用
// import { HBVue3UI } from 'hb-vue3-ui'
// import 'hb-vue3-ui/style.css'
const app = createApp(App);
app.use(HBVue3UI).mount('#app')

5. 在`App.vue`中引入组件测试

<template>
  <el-config-provider :locale="locale">
    <hb-license-apply></hb-license-apply>
    <hb-license-view></hb-license-view>
  </el-config-provider>
</template>
<script setup lang="ts">
import { initConfig } from '@/package'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const locale = ref(zhCn)
onMounted(() => {
  initConfig({
    url: 'http://192.168.0.52:9113',
    token:'123'
  })
})
</script>

6. 修改vite.config.ts


export default defineConfig({
 ...
 build: {
      outDir: 'hb-vue3-ui',
      target: 'es2015',
      minify: 'esbuild',
      cssTarget: 'chrome80',
      chunkSizeWarningLimit: 2000,
      lib: {
        entry: path.resolve(__dirname, './src/package/index.js'), //指定组件编译入口文件
        name: 'hb-vue3-ui',
        fileName: 'hb-vue3-ui'
      },
      rollupOptions: {
        // 确保外部化处理那些你不想打包进库的依赖
        external: ['vue'],
        output: {
          // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
          globals: {
            vue: 'Vue'
          }
        }
      } // rollup打包配置
    }
 })

7. 运行打包命令

在终端使用npm run build 如下图所示出现以下文件就打包成功了

上传到npm官网

1.在`hb-vue3-ui`下新建package.json

{
	"name": "hb-vue3-ui",
	"private": false,
	"version": "0.0.1",
	"description": "汇博机器人的Vue3组件库",
	"main": "hb-vue3-ui.mjs",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1"
	},
	"keywords": [
		"hb-vue3-ui",
		"HBVUE3UI"
	],
	"author": "",
	"license": "ISC"
}

2. 注册npm账号

想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。

3. 设置npm源

如果本地的npm镜像源采用的是淘宝镜像源或者其它的，若发布npm包，需要将npm源切换为官方得源，命令如下：

npm config set registry=https://registry.npmjs.org

4. 登录到npm

在打包后的文件根目录打开终端，输入npm login登录

5. 推送到npm仓库

在hb-vue3-ui目录下执行终端命令npm publish就可以正式发布到npm仓库了

nexus配置

因为公司已经搭建好了nexus仓库，此处只介绍Nexus的npm使用

1.创建npm私有仓库

2.添加角色

3.添加账号

4.配置权限

上传到nexus私服npm仓库

1. 设置npm包的源为私有库

npm config set registry http://153.37.213.2:2006/repository/npm-group

2. 登录账号

npm login--registry http://153.37.213.2:2006/repository/npm-hosted //或者npm adduser

3. 下载

npm install

4. 发布组件

在hb-vue3-ui目录下执行终端

npm publish --registry http://153.37.213.2:2006/repository/npm-hosted

中途遇见的问题：

npm publish报错403 解决方案：完整填写发布地址

npm publish --registry <http://153.37.213.2:2006/repository/npm-hosted>

使用vite构建Vue3组件库，上传到npm官网 / 上传到nexus私服npm仓库