vite-plugin-mpage
TypeScript icon, indicating that this package has built-in type declarations

0.0.11 • Public • Published

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

demo.png

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

Readme

Keywords

none

Package Sidebar

Install

npm i vite-plugin-mpage

Weekly Downloads

57

Version

0.0.11

License

MIT

Unpacked Size

51.1 kB

Total Files

34

Last publish

Collaborators

  • qingf