vite-plugin-vue-docs

介绍

vite 插件 - 自动生成 vue 组件文档网站。 在线体验

English | 中文

特点

• 支持热更新
• 快速启动，依赖于 vite，无需另起服务
• 自动生成组件导航
• Demo在线查看
• ui 采用了vant-ui的样式
• 核心方法覆盖率达到了 92.86%

运行 example

git clone https://github.com/meetqy/vite-plugin-vue-docs.git
yarn
yarn setup
yarn dev

使用

yarn add vite-plugin-vue-docs -D

配置 vite-config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueDocs from "vite-plugin-vue-docs";

export default defineConfig({
  plugins: [vue(), vueDocs()],
  resolve: {
    alias: {
      // 必须添加这一行，否则无法使用
      vue: "vue/dist/vue.esm-bundler.js",
    },
  },
});

修改 main.{ts|js} 文件

import { createRouter } from "vue-router";
// 引入虚拟package
import { routes, initVueDocsDemo } from "virtual:vite-plugin-vue-docs";

const router = createRouter({
  // ...
  routes,
});

// 导入demo组件
app.use(initVueDocsDemo);

引入类型文件

// vite-env.d.ts
/// <reference types="vite-plugin-vue-docs/client" />

详细使用方法可参考 @vue-docs/example

配置

| 参数 | 说明 | 默认值 | | ------------ | -------------------- | ------------- | | base | 文档路由地址 | /docs | | componentDir | 组件路径 相对于 src | /components | | vueRoute | router 实例名称 | router | | showUse | 静态网站显示使用指南 | true | | header | 头部配置 | - |

Header

| 参数 | 说明 | 默认值 | | ----- | ---------------- | -------- | | title | 网站 header 标题 | 项目名称 |

计划

• 🚀 表示已经实现的功能
• 👷 表示进行中的功能
• ⏳ 表示规划中的功能

| 功能 | 状态 | | -------------------------------------------- | --------- | | 可配置文档网站 | ⏳ 规划中 | | 兼容<script setup> | ⏳ 规划中 | | 兼容composition api | ⏳ 规划中 | | 可查看源代码 | 👷 进行中 | | 打包成静态网页 | 🚀 已完成 | | 页面跳转 history 模式 || hash 模式 | 🚀 已完成 | | 在线查看实例 | 🚀 已完成 | | 修改文件直接热更新，无须 F5 刷新 | 🚀 已完成 | | 支持解析slot | 🚀 已完成 | | 支持解析ref | 🚀 已完成 | | 支持type多种类型 | 🚀 已完成 | | 自动生成路由 | 🚀 已完成 |

CHANGELOG

更新日志