| string
}
```
## CSS 样式
```CSS
/* VuePreview 外边框圆角 */
--vue-preview-radius
/* VuePreview 边框颜色 */
--vue-preview-color-border
/* VuePreview 盒子阴影 */
--vue-preview-box-shadow
/* VuePreview 图标颜色 */
--vue-preview-color-icon
/* VuePreview 图标 hover 颜色 */
--vue-preview-color-icon-bg-hover
/* VuePreview 加载区域背景色 */
--vue-preview-color-model-bg
/* VuePreview 加载区域图标颜色 */
--vue-preview-color-loading
```
## 用法
### Vue 应用
> 导入 VuePreview 组件及样式
```TS
import { createApp } from 'vue'
import { VuePreview } from 'vite-plugin-vue-preview'
import 'vite-plugin-vue-preview/style.css'
const app = createApp()
app.component('VuePreview', VuePreview)
```
### Vitepress 应用
> 导入 VuePreview 组件及样式，同时配置插件设置
```TS
// vite.config.ts
import { defineConfig } from 'vite'
import { VuePreviewPlugin } from 'vite-plugin-vue-preview'
export default defineConfig({
plugins: [VuePreviewPlugin()],
})
// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import { VuePreview } from 'vite-plugin-vue-preview'
import 'vite-plugin-vue-preview/style.css'
export default {
...DefaultTheme,
enhanceApp(ctx) {
DefaultTheme.enhanceApp(ctx)
ctx.app.component('VuePreview', VuePreview)
},
}
```
一旦你按照上述流程配置完成，你就可以在你的markdown文件中使用了：
```vue preview
<template>
<h1>Demo: vite-plugin-vue-preview</h1>
</template>
```
## 插件配置
在 MarkDown 文件中，传递组件 **Props** 并没有太优雅的办法，故在插件配置中支持传入特定的组件 Props 进行全局配置
```TS
// vite.config.ts
import { defineConfig } from 'vite'
import { vuePreviewPlugin } from 'vite-plugin-vue-preview'
export default defineConfig({
plugins: [vuePreviewPlugin({
props: {
previewBodyStyle: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
previewAppStyle: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
},
importMap: {
'@vue/shared': 'https://unpkg.com/@vue/shared@latest/dist/shared.esm-bundler.js',
},
},
})],
})
```
