1 Star 3 Fork 1

meetqy / vite-plugin-vue-docs

加入 Gitee
与超过 600 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

vite-plugin-vue-docs

npm version license Statements example deploy

介绍

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

English | 中文

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

更新日志

点评 ( 0 )

你可以在登录后,发表评论

简介

vite插件-解析.vue文档,自动生成组件文档。支持hmr热更新,在线查看demo,打包成静态网站,部署到服务器。 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/meetqy/vite-plugin-vue-docs.git
git@gitee.com:meetqy/vite-plugin-vue-docs.git
meetqy
vite-plugin-vue-docs
vite-plugin-vue-docs
devlop

搜索帮助

105716 1d94204e 1850385 105716 2d26be5c 1850385