step1--引入对应依赖文件 我们会发现vue3.0或者说vue2.0需要引入的依赖为:vue-loader-v16,vue-markdown-loader, 这两个依赖是只是针对vue的,因此他并不适用与vite。 因此我们需要再npm库上找到对应的vite库,这里就不卖关子了,我这里使用的库是vite-plugin-md,vite-plugin-inspect,vite-plugin-pages。 step2--让v...
用vite去做转换,好在有人已经开发好了很多插件,所以只需要我们安装下即可 pnpm add vite-plugin-doc-preview // vite.config.ts import { defineConfig } from 'vite' import Vue from '@vitejs/plugin-vue' import Markdown from 'unplugin-vue-markdown/vite' import MarkdownPreview from 'vite-plugin-mar...
vite vue使用Markdown 下载插件: npmivite-plugin-md highlight.jsgithub-markdown-css 配置插件: importMarkdownfrom'vite-plugin-md'importvuefrom'@vitejs/plugin-vue'plugins: [vue( {include: [/\.vue$/,/\.md$/] } ),Markdown() ] 使用插件: <template><Demo/></template><scriptlang="ts">im...
本身是一个CV工程,结果搞了一整天。 老项目应该是一个python服务渲染html片段,新项目是vite+vue3的,因为想到后期如果在HTML上改文档实在是太麻烦了,容易出错不说,还不一定出效果。于是想到了用JSON维护,但是JSON渲染一些层级深的嵌套列表有些麻烦。最后还是决定搞一搞类似vuePress的功能:完全靠编辑MD文件渲染...
使用vite-plugin-markdown 这款第三方插件不仅支持引入并渲染 Markdown 文件,并且支持渲染成各种格式,例入 HTML 字符串、React 或 Vue 的组件等。 安装vite-plugin-markdown。 npmivite-plugin-markdown AI代码助手复制代码 在vite.config.js 中修改:
路由就是路径到组件的映射,这个组件显然指的是Vue组件,Vue组件是一个包含特定选项的JavaScript对象,我们平常开发一般使用的是Vue单文件,单文件最终也会被编译成选项对象,这个工作是@vitejs/plugin-vue做的,显然这个插件并不能处理Markdown文件,那么最终也就无法生成正确的Vue组件。
// vite.config.jsimportVuefrom'@vitejs/plugin-vue'importMarkdownfrom'unplugin-vue-markdown/vite'exportdefault{plugins:[Vue({include:[/\.vue$/,/\.md$/],}),Markdown({headEnabled:true// <--})]} // src/main.jsimport{createHead}from'@unhead/vue'// <--import{createApp}from'vue'con...
IT之家 3 月 22 日消息，Vue.js 团队发布 VitePress 1.0 版本。VitePress 是一个静态站点生成器（SSG），基于 Vite 和 Vue 前端框架构建。VitePress 支持获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署的静态 HTML 页面。官方表示，VitePress 目前适用于两个场景：文档：VitePress 附带一个专为...
这里以marked和vue-markdown-loader(通常用于webpack构建环境)或unplugin-vue-markdown(适用于Vite)为例进行说明。由于vue-markdown-loader更常用于Webpack环境,而您可能使用的是Vue 3和Vite,这里以unplugin-vue-markdown为例进行说明。 首先,安装unplugin-vue-markdown(如果您使用的是Vite): bash npm install un...
但在router/index.ts中直接引入md文件会报错,因为vite中引入静态资源如md等文件,需要在末尾加上?raw import markdownTxt from 'xxx.md?raw' 这样引入进来的就是markdown文件中的内容了,然后通过props传递到Test.vue组件内 importmarkdownTxtfrom'xxx.md?raw'importTestfrom'Test.vue'// 路由配置{path:'/Test'...