Vue3.3 + TS4 ，自主打造媲美 ElementPlus 的组件库

下面将详细介绍如何使用 Vue 3.3、TypeScript 4 和 ElementPlus 搭建一个组件库，涵盖项目初始化、环境配置、组件开发、打包发布等步骤。

Vue3.3 + TS4 ，自主打造媲美 ElementPlus 的组件库(完结)_优课it

项目初始化

首先要确保你已经安装了 Node.js 和 npm。使用 Vite 创建一个新的 Vue 3 + TypeScript 项目：

收起

bash

npm init vite@latest my-component-library -- --template vue-ts
cd my-component-library
npm install

安装 ElementPlus

在项目中安装 ElementPlus 及其相关依赖：

收起

bash

npm install element-plus @element-plus/icons-vue

配置 ElementPlus

在 src/main.ts 中引入并配置 ElementPlus：

收起

typescript

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

组件开发

在 src/components 目录下创建自定义组件，例如创建一个简单的按钮组件 MyButton.vue：

收起

vue

<template>
  <el-button :type="type" @click="handleClick">
    {{ label }}
  </el-button>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps<{
  type?: string;
  label: string;
}>();

const emits = defineEmits(['click']);

const handleClick = () => {
  emits('click');
};
</script>

<style scoped>
/* 可以在这里添加自定义样式 */
</style>

编写组件库入口文件

在 src/index.ts 中编写组件库的入口文件，用于导出所有组件：

收起

typescript

import { App } from 'vue';
import MyButton from './components/MyButton.vue';

const components = [MyButton];

const install = (app: App): void => {
  components.forEach((component) => {
    app.component(component.name || '', component);
  });
};

export { MyButton };

export default {
  install,
};

配置 TypeScript

确保 tsconfig.json 配置正确，支持 Vue 3 和 TypeScript 的特性：

收起

json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "Node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["ESNext", "DOM"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

打包组件库

安装 rollup 及其相关插件用于打包组件库：

收起

bash

npm install rollup rollup-plugin-vue @rollup/plugin-typescript @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser --save-dev

在项目根目录下创建 rollup.config.js 配置文件：

收起

javascript

import vue from 'rollup-plugin-vue';
import typescript from '@rollup/plugin-typescript';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.ts',
  output: [
    {
      file: 'dist/my-component-library.esm.js',
      format: 'esm',
    },
    {
      file: 'dist/my-component-library.umd.js',
      format: 'umd',
      name: 'MyComponentLibrary',
    },
  ],
  plugins: [
    vue(),
    typescript(),
    nodeResolve(),
    commonjs(),
    terser(),
  ],
  external: ['vue', 'element-plus'],
};

在 package.json 中添加打包脚本：

收起

json

{
  "scripts": {
    "build": "rollup -c"
  }
}

运行打包命令：

收起

bash

npm run build

发布组件库

在 package.json 中配置组件库的基本信息，如名称、版本、描述等。然后登录 npm 账号，发布组件库：

收起

bash

npm login
npm publish

使用组件库

其他项目可以通过 npm 安装并使用你开发的组件库：

收起

bash

npm install my-component-library

在项目的 main.ts 中引入并使用组件库：

收起

typescript

import { createApp } from 'vue';
import MyComponentLibrary from 'my-component-library';
import App from './App.vue';

const app = createApp(App);
app.use(MyComponentLibrary);
app.mount('#app');

在组件中使用自定义组件：

收起

vue

<template>
  <my-button type="primary" label="Click me" @click="handleClick"></my-button>
</template>

<script lang="ts" setup>
const handleClick = () => {
  console.log('Button clicked');
};
</script>

通过以上步骤，你就可以使用 Vue 3.3、TypeScript 4 和 ElementPlus 开发并发布一个组件库。