MY-Kit 开发指南

MY-Kit 开发指南

MY-Kit 基于 Vite 的超丝滑 Vue3 组件库开发框架 项目地址: https://gitcode.com/gh_mirrors/my/MY-Kit

MY-Kit 是一个基于 Vite 的 Vue3 组件库开发框架，它提供了一种超流畅的方式来创建和管理你的自定义Vue组件库，特别注重开发体验和文档一体化。

1. 项目目录结构及介绍

MY-Kit 的项目结构设计旨在简化组件开发与文档维护的过程。以下是核心的目录结构：

├── README.md       - 项目介绍和快速入门指南。
├── index.html      - 入口HTML文件。
├── package.json    - 项目依赖和脚本配置。
├── public          - 静态资源文件夹。
├── src             - 主应用代码存放处。
│   ├── main.ts     - 应用入口文件。
│   └── App.vue     - 主组件。
├── tsconfig.json   - TypeScript配置文件。
├── vite.config.ts  - Vite构建配置。
└── yarn.lock       - Yarn依赖锁文件。

├── packages        - 组件库的核心所在，包含所有组件。
│   ├── Button      - 示例组件之一，展示如何组织单个组件。
│   │   ├── docs     - 组件文档和交互式示例。
│   │   ├── src      - 组件源代码。
│   │   ├── index.ts - 组件导出文件。
│   │   └── list.json - 组件列表信息。
│   └── index.ts    - 整个组件库的导出入口。

组件目录示例 (packages/Button):

• src/index.vue: 组件实际代码。
• docs: 包含该组件的文档Markdown和交互实例Vue文件。
• index.ts: 导出组件以便外部使用。
• list.json: 记录组件基本信息，用于文档自动生成。

2. 项目的启动文件介绍

主要入口文件: src/main.ts

这是应用程序的起点，负责初始化Vue应用并挂载到DOM元素上。MY-Kit的特殊之处在于，它还会导入组件库MY-Kit，确保在应用中可以直接使用这些自定义组件。

import { createApp } from 'vue'
import App from './App.vue'
import MyKit from './packages'

createApp(App).use(MyKit).mount('#app')

3. 项目的配置文件介绍

Vite构建配置: vite.config.ts

此文件定义了Vite如何构建项目，包括插件使用、端口设置、公共路径等。对于MY-Kit，重点配置项包括Vue的支持、Markdown文件的解析插件vite-plugin-md，以及路由相关的配置，使得组件库在开发过程中能实现实时文档预览。

import { defineConfig } from 'vite';
import Markdown from 'vite-plugin-md';
import { vue } from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue({
      include: [/\.vue$/, /\.md$/],
    }),
    Markdown(), // 支持Markdown文件作为Vue组件
  ],
});

通过上述配置，MY-Kit实现了高效的组件开发流程，文档与代码紧密相连，大大提升了开发者的效率与体验。

MY-Kit 基于 Vite 的超丝滑 Vue3 组件库开发框架 项目地址: https://gitcode.com/gh_mirrors/my/MY-Kit