Vite-plugin-mpage NPM

vite-plugin-mpage

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

npm bundle size Github repo size Github repo file count

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>
  );
}