A lightweight and speedy tool to build one page for describing your react module

vite-plugin-mpage

“mpage” means “module page”, like one page project management. Abstractly speaking, one page for module just like one page for project.

Install

yarn add -D vite-plugin-mpage

// or

pnpm add -D vite-plugin-mpage

Add plugin to your vite.config.ts:

// vite.config.ts
import { defineConfig } from 'vite';
import mpage from 'vite-plugin-mpage';

// recommend to use @vitejs/plugin-react-swc

export default defineConfig({
  plugins: [mpage()],
});

Usage

The following is the recommended directory structure.

demo
├── base.tsx
└── intro.md

in ./demo/intro.md

## 模块名

- ⚡️ 模块特性1
- 📦 模块特性2
- 💡 模块特性3

## 如何使用

<Demo
  path="./base.tsx"
  title="basic usage"
  desc="basic description"
/>

in your App.tsx

import MPage from './demo/intro.md';

export default function App() {
  return <MPage />;
}

License

MIT License © 2023 Cecil0o0

GitHub

View Github