Vue插件集成至npm官网, 打造vue生态链

VUE3 + VITE 封装插件 发布到npm

1. 创建项目

pnpm create vite

2. 在 src 目录下创建一个 plugins 文件夹，用来存放插件

3. 创建组件， 以下面举例

因为组件库不仅仅有一个组件，这里简单创建了一个 message 组件举例

4. 编写这个组件

<template>
  <div class="msg" ref="msg" :class="{ active: msgStatus }">
    <div class="msg-wrapper">
      {{ text }}
    </div>
  </div>
</template>

<script setup>
defineOptions({
  name: "yb-message",
});
import { ref } from "vue";
let msgStatus = ref(false);
let text = ref("");

const open = function (msg, options = { type: "info", time: 2000 }) {
  text.value = msg;
  msgStatus.value = true;
  setTimeout(() => {
    msgStatus.value = false;
  }, options.time);
};

defineExpose({
  open,
});
</script>

<style scoped>
.msg {
  height: 22px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  min-height: 0;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  color: #fff;
  transition: all 0.5s;
  z-index: -1;
  opacity: 0;
}
.msg.active {
  width: 150px;
  min-height: 25px;
  opacity: 1;
  z-index: 11;
}
</style>

5. 编写入口 index.js

const requireComponent = import.meta.glob("./**/*.vue", { eager: true });

// console.log('requireComponent', requireComponent);

const install = (Vue) => {
  if (install.installed) return;
  install.installed;

  // console.log(Object.keys(requireComponent));

  Object.keys(requireComponent).forEach((fileName) => {
    //第i个组件
    const config = requireComponent[fileName];
    console.log("config", config);

    //组件名 刚才写的组件名派上用场了
    const componentName = config.default.name;

    console.log("componentName", componentName);

    Vue.component(componentName, config.default || config);
  });
};
//环境检测
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}
//对外暴露install方法
export default {
  install,
};

6. 引入本地进行测

main.js 引入入口文件，使用 Vue.use() 方法挂载插件

官方对 Vue.use() 方法的说明：通过全局方法 Vue.use() 使用插件，Vue.use 会自动阻止多次注册相同插件，它需要在你调用 new Vue() 启动应用之前完成，Vue.use() 方法至少传入一个参数，该参数类型必须是 Object 或 Function，如果是 Object 那么这个 Object 需要定义一个 install 方法，如果是 Function 那么这个函数就被当做 install 方法。在 Vue.use() 执行时 install 会默认执行，当 install 执行时第一个参数就是 Vue，其他参数是 Vue.use() 执行时传入的其他参数。就是说使用它之后调用的是该组件的 install 方法。

import { createApp } from "vue";
import App from "./App.vue";

import ybPlus from "./plugins/index.js";
const app = createApp(App);

app.use(ybPlus);
app.mount("#app");

在 App.vue 本地引入测试

<template>
  <yb-message ref="msg"></yb-message>
</template>

<script setup>
import { ref, onMounted } from "vue";

const msg = ref(null);

onMounted(() => {
  msg.value.open("Hello World");
});
</script>

7. 配置 vite.config.js

修改 vite.config.js 将 vite 设置为组件库打包模式

import { fileURLToPath, URL } from "node:url";
import path from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  publicDir: false, // 关闭vite默认的public目录
  build: {
    outDir: "yb-lib", // 打包输出目录
    lib: {
      // 指定库入口文件
      entry: path.resolve(__dirname, "src/plugins/index.js"),
      // 指定库的名称
      name: "yb-plus",
      fileName: "yb-plus",
    },
    rollupOptions: {
      external: ["vue"], // 防止将vue打包进库
      output: {
        globals: {
          vue: "Vue",
        },

        assetFileNames: (assetInfo) => {
          if (assetInfo.name.endsWith(".css")) {
            return "css/[name][extname]";
          }
          return "[name].[hash][extname]";
        },
      },
    },
  },

  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

8. 进行打包

在终端输入打包指令，如果出现如下文件夹，说明打包成功了

9. 配置 package.json

{
  "name": "yb-plus",
  "private": false,
  "version": "0.0.1",
  "description": "一个简单的ui组件库: yb-plus",
  "keywords": [
    "ui",
    "vue3",
    "yb-plus"
  ],
  "type": "module",
  "main": "yb-lib/yb-plus.js",
  "style": "yb-lib/css/yb-plus.css",
  "files": [
    "yb-lib"
  ],
  "license": "MIT",
  "author": {
    "name": "yb",
    "email": "[email protected]"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "vite": "^6.2.0"
  }
}

10. 上传到 npm

(1). 登录到 npm，没有 npm 账号的话需要到官网注册

在终端输入 npm 登录指令

npm login

发布

 npm publish

显示此结果说明已经发布成功了！ 这时我们到 npm 官网就可以搜索到我们发布的插件了

关于 package.json 修改

    "name": "xxx", // 这个名字要改，确保在npm几百万包中名字唯一性
    "private": false, // 这个确保不是私有的
    "license": "MIT",
    "description": "",
    "main": '',
    "style": '', 
    
    "files": [], // 打包结果只想上传哪个几个文件
    "scripts": {
        "lib": "vue-cli-service build --target  lib  --name  vue-xxx-xxxx  --dest  lib  src/plugins/index.js"
    }