vue3项目改造为组件库项目

vue3项目改造为组件库项目

---

基于vite快速搭建vue3项目开始。纯手码，如有错误，留言斧正

---

相关文章链接

程序员进阶之路

一、组件库目录创建

根目录创建packages文件夹及子孙文件如下:

packages
  |--components
  |    |--button
  |    |    |--src
  |    |    |    |--index.vue
  |    |    |--index.ts
  |    |--layout
  |         |--src
  |         |    |--index.vue
  |         |--index.ts
  |--utils
  |    |--component.ts
  |    |--config.ts
  |    |--install.ts
  |    |--utils.ts
  |--index.ts

文件内容在此不做解释，有疑问的可以留言

二、直接上源码

文件路径：packages\components\button\src\index.vue
文件内容如下

 <template>
  <el-button v-bind="$attrs" @click="handleClick">
    <slot />
  </el-button>
</template>

<script setup lang="ts">
import { ref } from "vue"

defineOptions({
  name: "EButton"
})

// 抛出事件
const emits = defineEmits(["click"])

const handleClick = () => {
  return emits("click")
}
</script>

文件路径：packages\components\button\index.ts
文件内容如下

import Index from "./src/index.vue"
export const EButton = Index

文件路径：packages\components\layout\src\index.vue
文件内容如下: 此处代码为实例代码，可根据自己需要改造布局

<template>
  <div
    style="padding:10px;border:1px solid #eee;"
  >
    <slot />
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: "ELayout"
})
</script>

文件路径：packages\components\layout\index.ts
文件内容如下

import Index from "./src/index.vue"
export const ELayout= Index

文件路径：packages\utils\component.ts
文件内容如下

import type { Component } from "vue"
import { EButton } from "../components/button"
import { ELayout } from "../components/layout"

export const components: Component[] = [
  ELayout,
  EButton
]

文件路径：packages\utils\config.ts
文件内容如下

export const version = "0.0.1"

文件路径：packages\utils\install.ts
文件内容如下

import { components } from "./component"
import { version } from "./config" // 配置信息

// 插件注册：在 Vue 项目的入口文件中，通过 ( app.use(插件) ) 进行注册
const install2 = (app: any) => {
  components.forEach((comp: any) => {
    app.component(comp.name as string, comp)
  })
}
// - install：每个插件都有一个 install 方法
const install = (app: any) => {
  install2(app)
}

export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  version//版本号
}

文件路径：packages\utils\utils.ts
文件内容为空，后期根据自己组件需要 编写工具类

文件路径：packages\index.ts
文件内容如下

import install from "./utils/install"

export default install

---

至此组件库基本目录全部完成。组件文档要同步完成，以便自己和他们后期使用，接下来讲使用vitepress编写组件文档