下载插件:

npm i vite-plugin-md highlight.js github-markdown-css

配置插件:

import Markdown from 'vite-plugin-md'
import vue from '@vitejs/plugin-vue' plugins: [
vue(
{ include: [/\.vue$/, /\.md$/] }
),
Markdown()
]

使用插件:

<template>
<Demo />
</template> <script lang="ts">
import { Vue, Options } from 'vue-property-decorator'
import 'highlight.js/styles/github.css'
import 'github-markdown-css'
import Demo from './demo.md' @Options({ components: { Demo } })
export default class HomeIndex extends Vue {}
</script>

vite vue使用Markdown的更多相关文章

  1. 实现Vue 的 markdown 文档可以在线运行(vue-markdown-run)

    闲暇时间我用Vue框架写了一个博客,编辑器是用的markdown文本的形式,介绍性+描述完全能满足我的需求,但是,如果想在线运行我markdown文本中的Vue组件代码,则无法实现了, 于是我就自己写 ...

  2. vue引用MarkDown(mavonEditor)编辑器,文档

    mavonEditor Install mavon-editor (安装) npm install mavon-editor --save 如何引入: 全局引用: // 全局注册 import Vue ...

  3. vue 将markdown字符串转html、修改主题、生成目录

    前言 将 markdown 字符串转成 html 显示出来,同时把目录也提取出来一起显示.可以使用 marked 来读取 markdown 字符串解析成 html marked官网:https://m ...

  4. vue 导入.md文件(markdown转HTML)

    前言 刚接到这个需求的时候,觉得很简单(的确很简单)但是这玩意的坑真的也让人无奈. 网上找了很多的资料,都没有写出痛点(这就很难过了).通过实践并且在我们项目中平稳运行,想分享给后面的人 我的博客上也 ...

  5. Vue应用框架整合与实战--Vue技术生态圈篇

    实用框架以及工具 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...

  6. 【转载】 github vue 高星项目

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

  7. VUE组件汇总

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

  8. 【分享】Vue 资源典藏(UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例)

    Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...

  9. Vue开源项目汇总(史上最全)(转)

    目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

  10. Markdown调查

    Markdown调查 一.Editor.md   文档详细,使用者较多 1.1 主要特性 支持“标准”Markdown / CommonMark和Github风格的语法,也可变身为代码编辑器: 支持实 ...

随机推荐

  1. 将npm安装镜像切换到淘宝

    cnpm(推荐) 安装 pm install cnpm -g --registry=https://registry.npm.taobao.org 使用 cnpm install [xxxxxxx] ...

  2. centos7(虚拟机)下安装redis

    centos7(虚拟机)下安装redis 安装 下载redis安装包 wget https://download.redis.io/releases/redis-6.2.1.tar.gz 解压安装包 ...

  3. Dubbo调用 Mybatis 实体类一对多时,报错

    添加fetchType="eager"属性 ,急加载 作为笔记,供个人参考

  4. 12.6linux学习第十三天

    今天老刘开始讲第9第章使用ssh服务管理远程主机.第10章开了个小头. 9.1 配置网卡服务 9.1.1 配置网卡参数 截至目前,大家已经完全可以利用当前所学的知识来管理Linux系统了.当然,大家的 ...

  5. vue-多个卡片翻转动效

    <van-grid :column-num="2" class="content" :border="false" > < ...

  6. C语言初级阶段4——数组2————二维数组

    C语言初级阶段4--数组2----二维数组 二维数组的定义:类型说明符 数组名[数组大小] [数组大小] 第一个大小是行的大小,第二个大小是列的大小. 二维数组的初始化:{} #include< ...

  7. hdu:Shape of HDU(判断多边形凹凸)

    Problem Description话说上回讲到海东集团推选老总的事情,最终的结果是XHD以微弱优势当选,从此以后,"徐队"的称呼逐渐被"徐总"所取代,海东集 ...

  8. FlexPaperViewer跨服务器\跨域访问swf不显示问题

    做在线预览办公文档时,遇到了使用flexpaper访问文件服务器swf不显示问题. 假想1: swf文件有问题? 实验1: 直接访问swf文件在文件服务器的地址,浏览器可以正常访问,但是放在flexp ...

  9. Docker安装一些软件

    1.Docker开始远程访问 vim /lib/systemd/system/docker.service 在ExecStart的值最最后面追加:空格+-H tcp://0.0.0.0:2375 sy ...

  10. remove blank line

    [$ cat all.experiments.csv.clean|sed -r '/^\s*$/d' > all.experiments.csv.clean2