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
├── intro.md
└── usage1.tsx

in ./demo/intro.md

## 模块名

> 背景描述

## 模块特性

- [x] 模块特性 1
- [x] 模块特性 2
- [ ] 模块特性 3

## 在线演示

### 基础用法

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

## 接口文档

### ICounter

<Interface path="../Counter.tsx" name="ICounter" />

in your App.tsx

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

export default function App() {
  return (
    <div className="min-h-screen flex justify-center mt-10">
      <IntroPage />
    </div>
  );
}

License

MIT License © 2023 Cecil0o0