Vue:引入markdown(.md)文件

简介: Vue:引入markdown(.md)文件

MarkDown

github: https://github.com/QingWei-Li/vue-markdown-loader


安装依赖


npm i vue-markdown-loader -D
# 样式
npm i github-markdown-css -D
npm i highlight.js -D

vue.config.js 中配置


chainWebpack: config => {
  config.module
    .rule("md")
    .test(/\.md/)
    .use("vue-loader")
    .loader("vue-loader")
    .end()
    .use("vue-markdown-loader")
    .loader("vue-markdown-loader/lib/markdown-compiler")
    .options({
      raw: true,
      preventExtract: true 
    });
};

使用


<template>
  <!-- class markdown-body 必须加,否则标签样式会出现问题 -->
  <div class="markdown-body">
    <about />
  </div>
</template>
<script>
  import about from "./about.md";
  // 代码高亮
  import "highlight.js/styles/github.css";
  // 其他元素使用 github 的样式
  import "github-markdown-css";
  export default {
    components: {
      about
    }
  };
</script>
相关文章
|
1月前
|
JavaScript
Vue————Vue v2.7.14 入口文件【二】
Vue————Vue v2.7.14 入口文件【二】
27 0
|
26天前
|
存储 自然语言处理 前端开发
Star 6.9k!开源的全能Markdown格式文件提取器:MinerU
总的来说,MinerU是一款非常实用且强大的数据提取工具。无论你是开发者、互联网从业者,还是有具体需求的新人小白,MinerU都能极大地提升你的工作效率,让你专注于更有价值的工作。 最后,如果你对MinerU感兴趣,不妨亲自尝试一下,相信你会爱上这款全能的Markdown格式文件提取器。
|
1月前
|
Web App开发 Linux Windows
解决Markdown文件上传至CSDN无法显示本地图片问题-白嫖版,分享给别人的md文件图片不显示的解决方案
解决Markdown文件上传至CSDN无法显示本地图片问题-白嫖版,分享给别人的md文件图片不显示的解决方案
|
1月前
|
JavaScript 容器
Vue学习之--------组件的基本使用(非单文件组件)(代码实现)(2022/7/22)
这篇文章讲解了Vue中组件的基本使用方法,包括组件的定义、注册和使用过程,并通过代码实例演示了非单文件组件的创建和使用,同时指出了一些使用组件时的注意事项。
Vue学习之--------组件的基本使用(非单文件组件)(代码实现)(2022/7/22)
|
2月前
|
JavaScript Java
Java 将Markdown文件转换为Word和PDF文档
【7月更文挑战第5天】Java中使用`Spire.Doc for Java`库可方便地将Markdown转换为Word或PDF。基本步骤包括导入模块,创建`Document`对象,加载Markdown文件,然后保存为目标格式(`.docx`或`.pdf`)。若遇到`Invalid UTF-8 stream`错误,需确保Markdown文件是UTF-8无BOM编码。页面设置可通过`PageSetup`类调整。注意,实际应用会依据具体需求和环境有所调整。
142 6
|
2月前
|
JavaScript
vue项目打包后自动压缩成zip文件
vue项目打包后自动压缩成zip文件
242 0
文本,vitepress两栏怎样设置,应用场景是每个导航都是单独的markdown文件
文本,vitepress两栏怎样设置,应用场景是每个导航都是单独的markdown文件
|
2月前
|
JavaScript
vue 加载展示md文件(markdown语法 .md后缀的文件)
vue 加载展示md文件(markdown语法 .md后缀的文件)
373 0
|
3月前
|
JavaScript
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
|
JavaScript 索引
VUE文件的创建
第一步创建完VUE 项目之后 可以根据自己的需求 创建自己的文件目录(下图是我的文件目录,当然每个人的创建目录的风格也是不同的所以不做严格的规范) 模块文生成    components文件夹下创建  模块文件名字.
794 0