vite构建Vue3项目:封装公共组件，发布npm包，自定义组件库

文章目录

• 前言
• 一、创建基础的vite 脚手架
• 二、文件结构
• 三、编写组件代码,本地测试
• 四、配置项
• 五、打包npm发布
• 六、npm下载使用
• 总结

---

前言

使用vue开发组件封装是一个很普遍的事情了，封装好一个组件可以在项目的任意地方去使用，我们还可以从npm仓库下载别人封装的组件进行使用，比如element-ui,vant,antd,echarts等组件库，但是由于不同的公司，不同的网站风格，是我们在开发中还是得自己封装自己的组件，要想在不同项目上使用自己封装的组件，不可能去旧项目复制组件代码到新的项目里面去。所以我们可以将组件上传到npm仓库，使用的时候直接从npm安装使用。

---

一、创建基础的vite 脚手架

npm create vite  vite-demo(项目名称) --template vue 

•   下载依赖：npm i
•    启动项目：npm run dev

二、文件结构

• 在根目录下新建一个packages文件夹，文件夹下的分别是zd-vin(自定义名称)和index.js。packages的主要作用就是放我们的公共组件，后续导出的，index.js内将导入zd-vin下的全部组件。
• 

三、编写组件代码，本地测试

• 在zd-vin文件夹下创建你的第一个组件（zd-Button.vue）

• <script setup>
  /**
   * 接收传过来的值
   *
   * @param size 定义按钮的大小 可选值为 'large' | 'middle' | 'small' | 'mini'
   * @param type 定义按钮的类型 默认不填
   */
  defineProps({
    size: {
      type: String,
      default: "middle",
    },
    type: {
      type: String,
      default: "default",
    },
  });
  </script>
  <script>
  export default {
    name: "zd-Button",
  };
  </script>
  
  <template>
    <button class="muk-btn" :class="[size, type]">
      <!-- 定义插槽用于让用户自定义按钮你们的内容 -->
      <slot></slot>
    </button>
  </template>
  
  <style scoped lang="less">
  .muk-btn {
    appearance: none;
    border: none;
    outline: none;
    background: #fff;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .large {
    width: 240px;
    height: 50px;
    font-size: 16px;
  }
  
  .moddle {
    width: 180px;
    height: 50px;
    font-size: 16px;
  }
  
  .small {
    width: 100px;
    height: 32px;
  }
  
  .mini {
    width: 60px;
    height: 32px;
  }
  
  .default {
    border-color: #e4e4e4;
    color: #666;
  }
  
  .primary {
    border-color: skyblue;
    background: skyblue;
    color: #fff;
  }
  
  .plain {
    border-color: skyblue;
    color: skyblue;
    background: lighten(skyblue, 50%);
  }
  
  .gray {
    border-color: #ccc;
    background: #ccc;
    color: #fff;
  }
  </style>
  

  在package文件下新建index.js用于导出组件

• import { defineAsyncComponent } from "vue";
  
  const components = import.meta.glob("./zd-vin/*.vue");
  const registerGlobalComponent = (app) => {
    for (const [key, value] of Object.entries(components)) {
      const name = key.slice(key.lastIndexOf("/") + 1, key.lastIndexOf("."));
      app.component(name, defineAsyncComponent(value));
    }
  };
  
  export default registerGlobalComponent;

•  本地测试
  在src\main.js注册组件

  import { createApp } from "vue";
  import App from "./App.vue";
  import registerGlobalComponent from "../packages/index";
  
  const app = createApp(App);
  registerGlobalComponent(app);
  app.mount("#app");

  
• 在src\App.vue里面去使用按钮

  <template>
    <zd-Button size="small" type="primary">我的按钮</zd-Button>
  </template>

   

  

四、配置项

• 在项目的根目录的vite.config.js修改相关配置，修改成组件库打包模式，

  import { defineConfig } from "vite";
  import vue from "@vitejs/plugin-vue";
  import path from "path";
  
  // https://vite.dev/config/
  export default defineConfig({
    plugins: [vue()],
    build: {
      outDir: "zd-vin-package", //输出文件名称
      lib: {
        entry: "./packages/index.js", //指定组件编译入口文件
        name: "zd-vin-package",
        fileName: "zd-vin-package",
      }, //库编译模式配置
      rollupOptions: {
        // 确保外部化处理那些你不想打包进库的依赖
        external: ["vue"],
        output: {
          // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
          globals: {
            vue: "Vue",
          },
        },
      }, // rollup打包配置
    },
  });

五、打包npm发布

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

• 发布前还需要做一下准备？

1. 配置package.json

   首先我们在打包好的zd-vin-package目录下，打开终端，然后执行npm init -y命令初始化package.json

2. 配置内容

   {
     "name": "zd-vin-package",   //组件库名称
     "private": false,       
     "version": "1.0.0",       //版本号
     "description": "我创建的第一个组件库", //描述
     "main": "zd-vin-package.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     //keywords 用来npm 库搜索关键词
     "keywords": [
       "zd",
       "zd-vin",
       "ZD",
       "ZD-VIN",
       "zd-vin-package"
     ],
     "author": "",
     "license": "ISC"
   }

3. 创建npm 账号
   ​​​​​https://www.npmjs.com/   注册完成记得自己的账号，密码，邮箱，后续发布验证需要邮箱！

4. 设置npm 源 因为之前大部门朋友设置的是淘宝镜像现在需要恢复成npm源

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

     5. 在打包好的文件zd-vin-package下命令行输入

npm adduser

添加自己的账号

打开刚刚邮箱输入验证码

 6. 输入：

npm publish --access=public

发布npm (切记：上面的zd-vin-package一定要自定义名称，文件名称重复会导致发布失败)

如果以上命令无法实现可以尝试使用下面的命令：

npm login
npm publish

发布成功后可以去https://www.npmjs.com/ 查看：

                

六、npm下载使用

可以再次通过vite创建一个项目或者直接在已有项目中安装发布的组件

npm install zd-vin-package

---

import "zd-vin-package/style.css"; //引入组件样式
import ZD from "zd-vin-package"; //引入下载后的组件

const app = createApp(App);
app.use(ZD); //注册

代码中使用

  <zd-Button size="small" type="primary">我的按钮1</zd-Button>

总结

大概就是如此吧！有问题可以评论，私信-----ps写完了，外面雨也下大了；雨一直下，希望大家一切都很融洽~