这是我参与「第五届青训营 」伴学笔记创作活动的第 十 天
本文的搭建的组件库含有vue3.2最新语法糖+TS+Vite+Eslint+prettier+husky+vitest+@vue/test-utils
一、项目目录
承接上一篇，这是最终我们需要的组件文件目录，先大概介绍一下。playground文件夹是我们拿来测试组件的（就是用直接使用组件的方式来测试），并不是单测。package文件夹呢是拿来装我们开发的组件。
二、开始配置
先把src文件夹改成playground，然后将index.html里面的对入口文件的路径修改一下，然后可以将下面的X-UI改成自己组件库想要的名字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>X-UI</title>//可以改成自己想要的名字
</head>
<body>
<div id="app"></div>
<script type="module" src="/playground/main.ts"></script>//修改此处
</body>
</html>
再创建一个package文件夹，文件目录如下，该步骤主要创建了放置所有组件的components文件夹，和标准组件文件夹结构（此处拿button组件举例）
三、配置组件库导出架构
1.在button文件夹的src文件夹下创建一个button.vue：
vue3.2的组件命名（下方button案例的name）：使用 vite 插件 vite-plugin-vue-setup-extend 安装
npm i vite-plugin-vue-setup-extend -D
配置 vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
plugins: [ VueSetupExtend() ]
})
<template>
<div>Button组件</div>
</template>
<script setup lang="ts" name:"xButton">//可自己取名
import { ref, reactive, toRefs, onMounted} from 'vue'
</script>
<style scoped lang="scss">
</style>
2.在button组件里创建index.ts，作为组件导出文件，内容如下：
import { App } from "vue";
import Button from "./src/button.vue";
Button.install = function (app: App) {
// 组件注册，按需引入
app.component(Button.name, Button);
return app;
};
export default Button;
3.分别在package文件夹下创建两个文件，component.ts和index.ts,用来做统一的组件管理和组件库整体的导出，其中注意文件路径就好。
//component.ts
import Button from "./components/button";
export default [Button];
export { Button };
//index.ts
import { App } from "vue";
import components from "./component";
// 所有组件
export * from "./component";
// 完整引入组件
const install = function (app: App) {
components.forEach((component) => {
app.use(component as unknown as { install: () => any });
});
};
export default {
install,
};
4.修改一下main.ts，导入你的组件库（XUI可以改成你自己想要的名名字）：
import { createApp } from "vue";
import App from "./App.vue";
import XUI from "../package/index";
import "./assets/main.css";
createApp(App).use(XUI).mount("#app");
