vite-plugin-doc
介绍
vite-plugin-doc 是基于 vite 的插件机制实现对 Markdown 文件内容进行转换。核心通过 marked 结合 highlight.js 实现代码高亮和美化，并且还可以让你的 React Component 组件代码运行在 Markdown 文件里，享受 vite 2.0 带来的极速编译体验预览效果哦！
安装
# 通过 npm 安装
npm i vite-plugin-doc -D
# 通过 yarn 安装
yarn add vite-plugin-doc --dev配置
只需在 vite.config.js 配置文件内引入 vite-plugin-doc 插件，您就可以在 React 代码里引用 Markdown 文件。（此外，通过设置 mode 可以切换 pc 端 或者 mobile 移动端两种渲染模式）
import viteDoc from "vite-plugin-doc";
export default defineConfig({
plugins: [
viteDoc({
mode: "pc", // 默认值 mobile
className: "custom-classname", // 自定义文档类名
}),
resolve: {
alias: {
"you-component-name": path.resolve(__dirname, `./src/components`), // 组件库别名
},
},
],
});React 引入
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Md from "./button.md"; // 直接作为路由渲染
ReactDOM.render(
<div className="App">
<BrowserRouter>
<Switch>
<Route component={Md} path="/" exact />
</Switch>
</BrowserRouter>
</div>,
document.getElementById("root")
);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 | 按钮内容 |
