在 NPM 上发布一个 Vue 组件库

编写组件库

使用 vite 创建一个项目，然后剔除项目中多余的文件，之后开始编写自己的组件：

文件目录：

编写 Demo.vue 组件：

注意：组件内其实随便写点什么测试用就行，但要给组件设置 name 用于后续注册组件

<template>
  <div>小小的 demo</div>
</template>

<script setup>
defineOptions({
  name: "Demo",
  inheritAttrs: false
})
</script>


<style scoped>

</style>

编写出口文件：

//导入组件
import Demo from './Demo/Demo.vue'

//将支持全局注册的添加到这个数组
const component = [Demo]

// 将支持按需引入的添加到这里暴露出去
export {Demo}

// 默认暴露
export default {
    //install方法会在使用 vue.use() 方法被调用，接收到一个参数 vue
    install(vue) {
        // 全局注册上面数组中的组件
        component.forEach(item=>{
            vue.component(item.name,item)
        })
    }
}

本地测试组件库

全局引入测试：

编写 main.js：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 导入组件库
import seyuVfx from "./components/seyu-vfx/index.js";

const app = createApp(App)
//注册组件库
app.use(seyuVfx)

app.mount('#app')

在页面中使用组件：

<template>
  <!--直接使用就好-->
  <Demo></Demo>
</template>

<script setup>

</script>

<style>

</style>

运行项目后没出错就能看见 Demo 组件中写的内容了

按需引入测试：

按需引入不需要在 main.js 引入注册，而是直接再需要的组件中引入所需的组件即可：

<template>
  <Demo></Demo>
</template>

<script setup>
  import {Demo} from './components/seyu-vfx/index.js'
</script>

<style>

</style>

打包组件库

修改 vite.config.js 配置

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'seyu-vfx', //输出文件名称
    lib: {
      entry: 'src/components/seyu-vfx/index.js', //指定组件编译入口文件
    },
    //库编译模式配置
    rollupOptions: {
      //忽略不想打包进库的依赖
      external: ['vue'],
      output: {
        // 全局变量的名称，如果你的组件库要在浏览器中直接引用，可以配置这个属性
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

运行打包命令后得到文件夹 seyu-vfx

发布到 NPM 上

发布前的一些小改动

在打包后的包里修改以下文件，没有的话就添加上去

package.json 的一些配置信息

发布

在打包后文件的目录下进入 cmd 进行 npm 登录，不过要把 npm 源切换到官方路径先

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

运行 npm login 进行登录，登录后执行 npm publish 命令上传。出现下面这一行信息就表示成功了：

在 npm 网上搜索查看

下载使用

在项目中终端下运行下载命令下载

npm i seyu-vfx

然后在项目中测试是否可用

main.js:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 导入组件库
import seyuVfx from "seyu-vfx";

const app = createApp(App)
//注册组件库
app.use(seyuVfx)

app.mount('#app')

页面组件中：

<template>
  <Demo></Demo>
</template>

<script setup>
  // 按需引入
  //import {Demo} from 'seyu-vfx'
</script>

<style>

</style>