This Vite plugin support `<preview lang="md">` custom block in SFC for preview single Vue component.. Latest version: 1.1.7, last published: a year ago. Start using vite-plugin-vue-component-preview in your project by running `npm i vite-plugin-vue-compo
{"vueCompilerOptions": {"plugins": ["vite-plugin-vue-component-preview/tooling"] } } Example <!-- Component part --><template>{{ msg }}count is: {{ count }}</template>import{ref}from'vue'defineProps<{msg:string}>()constcount=ref(0)<!-- Preview part --><previewlang="md"># T...
npm i unplugin-vue-components -D 配置:vite.config.js import Components from 'unplugin-vue-components/vite' // ui库解析器,也可以自定义,需要安装相关UI库,unplugin-vue-components/resolvers // 提供了以下集中解析器,使用的时候,需要安装对应的UI库,这里以element为示例 // 注释的是包含的其他一些常用...
"preview": "vite preview" }, "dependencies": { "vue": "^3.3.11" }, "devDependencies": { "@vitejs/plugin-vue": "^4.5.2", "typescript": "^5.2.2", "vite": "^5.0.8", "vue-tsc": "^1.8.25" } } 四、安装element plus 安装指令:npm install element-plus --save 自动按需导入指...
vite-plugin-vue-preview 简体中文 A Vite plugin made for previewing and editing Vue components in Markdown and, of course, exporting aVuePreviewcomponent to be used directly in Vue applications. Tip For most simple code preview scenarios that don't strongly bind to a vue component, it's even...
有没有方法可以直接把demo.vue中的代码展示出来呢?答案是可以的。在Vite 的开发文档里有记载到,它支持在资源的末尾加上一个后缀来控制所引入资源的类型。比如可以通过 import xx from 'xx?raw' 以字符串形式引入 xx 文件。基于这个能力,我们可以编写一个 <Preview /> 组件来获取所需要展示的文件源码。一、新建...
preview'exportdefaultdefineConfig({plugins:[react(),MarkedPreview({mode:'react'})// 可根据需要设置参数,可选/*MarkedPreview({marked:{}, // marked转换options,可参考https://marked.js.org/component:false // 是否自定义预览组件,默认falsepreviewId:'vue preview' // 预览标识,默认vue preview})*/]...
如果默认的预览样式不够漂亮不符合您的使用场景,插件提供了自定义预览组件的功能,你可以通过使用previewComponent属性指定自己的预览组件。 这时候demo和code会分别以slot#defalut和slot#code传递给自定义组件,您可以自由的发挥。 [vite-plugin-vuedoc] 效果预览 ...
routes, }); // 导入demo组件 app.use(initVueDocsDemo); 引入类型文件 // vite-env.d.ts /// <reference types="vite-plugin-vue-docs/client" /> 详细使用方法可参考 @vue-docs/example 配置 参数说明默认值 base 文档路由地址 /docs componentDir 组件路径 相对于 src /components vueRoute router...
disable vite internalrollup-plugin-vue(26f39d2) Don't import from typescript source files (#125) (d05f74d) expose file's full path in development (#99) (eb26e6e) fallback assets resolve + bump@vue/component-compiler-utils(0d04c91) ...