vite-plugin-doc

介绍

vite-plugin-doc 是基于 vite 的插件机制实现对 Markdown 文件内容进行转换。核心通过 marked 结合 highlight.js 实现代码高亮和美化，并且还可以让你的 React Component 组件代码运行在 Markdown 文件里，享受 vite 2.0 带来的极速编译体验预览效果哦！

安装

1# 通过 npm 安装
2npm i vite-plugin-doc -D
3
4# 通过 yarn 安装
5yarn add vite-plugin-doc --dev

配置

只需在 vite.config.js 配置文件内引入 vite-plugin-doc 插件，您就可以在 React 代码里引用 Markdown 文件。（此外，通过设置 mode 可以切换 pc 端 或者 mobile 移动端两种渲染模式）

1import viteDoc from "vite-plugin-doc";
2
3export default defineConfig({
4  plugins: [
5    viteDoc({
6      mode: "pc", // 默认值 mobile
7      className: "custom-classname", // 自定义文档类名
8    }),
9    resolve: {
10      alias: {
11        "you-component-name": path.resolve(__dirname, `./src/components`), // 组件库别名
12      },
13    },
14  ],
15});

React 引入

1import React from "react";
2import ReactDOM from "react-dom";
3import { BrowserRouter, Switch, Route } from "react-router-dom";
4import Md from "./button.md"; // 直接作为路由渲染
5
6ReactDOM.render(
7  <div className="App">
8    <BrowserRouter>
9      <Switch>
10        <Route component={Md} path="/" exact />
11      </Switch>
12    </BrowserRouter>
13  </div>,
14  document.getElementById("root")
15);

button.md 内容

# Button 按钮

### 函数组件

支持函数组件写法。注意：如果要渲染 React Components 组件，导出组件名称必须是 `Example`，否则只会进行代码高亮处理。

```jsx
import { Button } from "you-component-name";

const Example = () => {
  const [nums, setNums] = useState(1);
  return (
    <div className="demo-button">
      <Button onClick={() => setNums(10)}>默认按钮{nums}</Button>
    </div>
  );
};
export default Example;
```
### 类组件

支持类组件写法。注意：如果要渲染 React Components 组件，导出组件名称必须是 `Example`，否则只会进行代码高亮处理。

```jsx
import { Button } from "you-component-name";

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      nums: 10,
    };
  }
  render() {
    return (
      <div className="demo-button">
        <Button onClick={() => this.setState({ nums: 100 })}>
          默认按钮 {this.state.nums}
        </Button>
      </div>
    );
  }
}
export default Example;
```
## API

### Props

| 参数         | 说明                                               | 类型     | 默认值    |
| ------------ | -------------------------------------------------- | -------- | --------- |
| type         | 类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` |
| size         | 尺寸，可选值为 `large` `small` `mini`              | _string_ | `normal`  |
| color        | 按钮颜色，支持传入 `linear-gradient` 渐变色        | _string_ | -         |
| icon         | 图标名称                                           | _string_ | -         |
| iconSize     | 加载图标大小                                       | _string_ | `16px`    |
| iconPosition | 图标展示位置，可选值为 `right`                     | _string_ | `left`    |

### Events

| 事件名     | 说明                                     | 回调参数            |
| ---------- | ---------------------------------------- | ------------------- |
| click      | 点击按钮，且按钮状态不为加载或禁用时触发 | _event: Event_      |
| touchstart | 开始触摸按钮时触发                       | _event: TouchEvent_ |

### Slots

| 名称    | 说明     |
| ------- | -------- |
| default | 按钮内容 |

效果

pc 端渲染效果展示

mobile 移动端渲染效果展示