vue3组件库搭建并且发布到npm保姆教程连载一

本文链接：https://blog.csdn.net/weixin_48727473/article/details/128837005

前言

小时候的梦想是拥有一个自己的组件库(开玩笑哈)，接触前端后，很多时候在npm install的时候，我在想我们安装的这些依赖发布者是如何将依赖发布到npm，并且可以让别人使用的，未知是让人害怕的，经过一系列学习和探索后，我也拥有了自己的组件库，也可以让别人使用我的组件库啦。

构建项目

vite官网三种构建vite项目的命令
1. npm create vite@latest
2. yarn create vite
3. pnpm create vite

我这边选用的是pnpm,打开命令行工具，运行后根据提示操作，框架选择vue。语言选择typeScript，也可以选择JavaScript，最后成功生成项目。
在这里插入图片描述

然后pnpm install安装依赖运行即可，运行后打开如下图，就说明构建成功啦
在这里插入图片描述

新建组件

在src的components目录下新增CwButton.vue

在这里插入图片描述

# CwButton.vue代码
<template>
  <div>
    <button class="test" @click="handleSubmit">我是测试要发布的按钮组件</button>

    <button class="test" @click="handleSubmit">我是测试要发布的按钮组件</button>
  </div>
</template>

<script lang="ts">
export default {
  //组件名称
  name: "cw-button",
};
</script>
<script lang="ts" setup>
function handleSubmit() {
  alert("发布组件一定成功");
}
</script>

<style>
.test {
  height: 100px;
  width: 200px;
  background-color: red;
  color: black;
}
</style>

在src的components目录下新增index.ts

在这里插入图片描述

// 引入封装好的组件
import CwButton from "./CwButton.vue";


const components = [CwButton];

const install = function(App:any, options:any) {
    components.forEach((component) => {
        App.component(component.name,component);
    });
};

// 批量导出*
export default { install }

当前项目测试一下CwButton组件

HelloWorld.vue中引入
查看是否使用成功

配置vite.config.ts

更多具体可参考vite官网库模式配置
在这里插入图片描述

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      // 入口文件，因为库模式不能用html页面作为入口
      entry: resolve(__dirname,'src/components/index.ts'),
      // 库名称
      name: 'CwComponentTest',
      // 打包后文件的名称
      fileName: ((format) => `cw-componentTest.${format}.ts`),
      // 不写也可以，默认就是['es','umd']
      formats: ['es','umd']
    },
    // 自定义底层的 Rollup 打包配置
    rollupOptions: {
      // 确保某些库不进行打包，作为外部依赖
      external: ['vue'],
      output: {
        // 打包时全局变量Vue就是vue
        globals: {
          vue: 'Vue',
        }
      }
    }
  }
})

配置package.json

更多具体可参考vite官网库模式配置
在这里插入图片描述

{
  "name": "my-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "files": [
    "dist"
  ],
  "main": "cw-component.umd.ts",
  "module": "cw-component.es.ts",
  "exports": {
    ".": {
        "import": "./cw-component.es.ts",
        "require": "./cw-component.umd.ts"
    }
  },
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "typescript": "^4.9.3",
    "vite": "^4.0.0",
    "vue-tsc": "^1.0.11"
  }
}