vite-plugin-vue-docs

介绍

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

preview

特点

支持热更新
快速启动，依赖于 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

更新日志

meetqy / vite-plugin-vue-docs

vite-plugin-vue-docs

介绍

特点

运行 example

使用

配置 vite-config.js

修改 main.{ts|js} 文件

引入类型文件

配置

Header

计划

CHANGELOG

简介

发行版

贡献者

近期动态

meetqy / vite-plugin-vue-docs .gitee-modal { width: 500px !important; }

vite-plugin-vue-docs

介绍

特点

运行 example

使用

配置 vite-config.js

修改 main.{ts|js} 文件

引入类型文件

配置

Header

计划

CHANGELOG

简介

发行版

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

近期动态

搜索帮助

meetqy / vite-plugin-vue-docs