Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/meetqy/vite-plugin-vue-docs-2
Vite plugin - automatically generate Vue component documentation website.
https://github.com/meetqy/vite-plugin-vue-docs-2
document plugin vite vue
Last synced: about 2 months ago
JSON representation
Vite plugin - automatically generate Vue component documentation website.
- Host: GitHub
- URL: https://github.com/meetqy/vite-plugin-vue-docs-2
- Owner: meetqy
- License: mit
- Created: 2021-06-28T08:23:32.000Z (over 3 years ago)
- Default Branch: devlop
- Last Pushed: 2022-01-27T11:09:45.000Z (almost 3 years ago)
- Last Synced: 2024-10-31T02:49:27.824Z (about 2 months ago)
- Topics: document, plugin, vite, vue
- Language: TypeScript
- Homepage: https://meetqy.github.io/vite-plugin-vue-docs/
- Size: 7.51 MB
- Stars: 55
- Watchers: 5
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.en.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-vue-docs
[](https://www.npmjs.com/package/vite-plugin-vue-docs)
[](https://meetqy.github.io/vite-plugin-vue-docs/#/docs)
Vite plugin - automatically generate Vue component documentation website. 在线体验
**English** | [中文](./README.md)
## Features
- Support hot update
- Quick start, rely on vite, no need to start another service
- Automatically generated component navigation
- `Demo` View online
- ui adopts the style of `vant-ui`
- Core method coverage reached 92.86%
## Run example
```shell
git clone https://github.com/meetqy/vite-plugin-vue-docs.git
yarn
yarn setup
yarn dev
```
## Use
```shell
yarn add vite-plugin-vue-docs -D
```
### To configure **vite-config.js**
```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: {
// This line must be added, otherwise it cannot be used
vue: "vue/dist/vue.esm-bundler.js",
},
},
});
```
### Edit **main.{ts|js}**
```js
import { createRouter } from "vue-router";
// Introducing virtual package
import { routes, initVueDocsDemo } from "virtual:vite-plugin-vue-docs";
const router = createRouter({
// ...
routes,
});
// Import demo components
app.use(initVueDocsDemo);
```
### Import type file
```js
// vite-env.d.ts
///
```
For detailed usage, please refer to [@vue-docs/example](./packages/example/README.md)
## Config
| Parameter | Description | Default |
| ------------ | -------------------------------- | ------------- |
| base | Document routing address | `/docs` |
| componentDir | Component path relative to `src` | `/components` |
| vueRoute | Router instance name | `router` |
| showUse | Static website display guide | `true` |
| header | Header config | - |
## Header
| Parameter | Description | Default |
| --------- | -------------------- | ------------ |
| title | Website header title | Project name |
## Plan
- 🚀 Indicates the functions that have been implemented
- 👷 Indicates a function in progress
- ⏳ Represents the function in the plan
| Function | Status |
| ------------------------------------------------------------ | ------------ |
| Configurable document website | ⏳ Planning |
| Compatible with `< script setup >` | ⏳ Planning |
| Compatible with 'composition API' | ⏳ Planning |
| You can view the source code | 👷 Progress |
| Package into static web pages | 🚀 Completed |
| The page jumps to history mode | 124; Hash mode | 🚀 Completed |
| View instances Online | 🚀 Completed |
| The modified file is directly hot updated without F5 refresh | 🚀 Completed |
| Support parsing ` slot ' | 🚀 Completed |
| Support parsing ` ref ' | 🚀 Completed |
| Multiple types of 'type' are supported | 🚀 Completed |
| Automatic route generation | 🚀 Completed |
## CHANGELOG