Vue读取本地静态.md并侧边栏导航跳转、展示.md文件

这篇具有很好参考价值的文章主要介绍了Vue读取本地静态.md并侧边栏导航跳转、展示.md文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue markdown 侧边栏导航跳转 类似锚点跳转 - 灰信网(软件开发博客聚合)

Vue使用mavon-editor插件解析markdown编辑预览_onpine的博客-CSDN博客

vue组件直接读取.md文档展示_vue项目中读取readme文件_小蒜瓣的博客-CSDN博客vue中使用mavonEditor(markdown编辑器插件)_兮赫的博客-CSDN博客

文档

mavon-editor - npm

我的项目需求展示 .md文件 并带侧边栏跳转

Vue读取本地静态.md并侧边栏导航跳转、展示.md文件,Vue.js,vue.js,javascript,ecmascript

研究了以上资料 

1、首先安装 text-loader

 npm install text-loader

2、修改webpack.base.config.js,我用的cli所以自己加了一个vue.config.js

 module.exports = {
      //此部分
     configureWebpack: {
       module: {
         rules: [
         {
           test: /\.md$/,
          use: ["text-loader"]
         }
      ]
    }
  }
}

上面的很符合我的要求 但是项目没生效 我只能另想办法!

3、安装mavon-editor 既可以解析markdown 又可以编辑

npm install mavon-editor --save

4、在main.js中引入mavon-editor 

//全局注册
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'	//解决编辑器的功能显示问题
Vue.use(mavonEditor)

5、markdown文字解析到页面来,以便展示 .md里的内容能够展示出来。

<mavon-editor
            v-if="machineIsShow"
            v-model="machineMDJS"
            :editable="false"
            :value="machineMDJS"
            :subfield="false"
            :defaultOpen="'preview'"
            :toolbarsFlag="false"
            :scrollStyle="true"
            :ishljs="true"
            :navigation= "true"
            style="max-height: 1000px"
/>

<script>
import machineMDJS from '../../../public/static/md/machine/machine.js'
import 'github-markdown-css/github-markdown.css'
import 'highlight.js/styles/github.css'
export default {
  name: 'FrontendManageCaseDetails',
  components:{
    
  },
  data() {
    return {
      machineMDJS: machineMDJS,
    };
  },
};
</script>

没法 我只能把.md文件里面的内容放js里面才行 (因为text-loader不生效)

machine.js

export default `# 机房门开关

## 使用流程

![](./static/md/machine/media/a701685c7ef86716224a7fd3fd9d9168.png)

## 模板化端到端示例

模板化训练流程:

`

现在 md文件可以展示了 但是图片出不来了

最后把图片或者这个展示的文件一起放static 静态资源目录下引入 就成功了。。。

在根目录下面的public下面可以放置静态资源,页可以将static文件夹放在public目录下面
若放在static下,写法如下所示:文章来源地址https://www.toymoban.com/news/detail-630906.html

this.url =  '/static/xxx.xlsx'

到了这里,关于Vue读取本地静态.md并侧边栏导航跳转、展示.md文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue + element ui 实现侧边栏导航栏折叠收起

    首页布局如下 要求点击按钮,将侧边栏收缩, 通过 row 和 col 组件,并通过 col 组件的 span 属性我们就可以自由地组合布局。 侧边栏代码  效果 补充路由:    

    2024年02月11日
    浏览(42)
  • 前端Vue非常简单实用商品分类展示组件 侧边商品分类组件

    前端vue非常简单实用商品分类展示组件 侧边商品分类组件 , 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13084 效果图如下: 使用方法 HTML代码部分 JS代码 (引入组件 填充数据) CSS

    2024年02月09日
    浏览(48)
  • vue2+element-ui实现侧边导航栏

    编写 client/src/components/LeftMenu.vue ,创建侧边导航栏: 编辑 client/src/views/Index.vue ,引入侧边导航栏:

    2024年02月02日
    浏览(48)
  • VUE3如何读取本地json文件

    首先需要安装axios npm install axios --save 然后在main.js引用axios 然后就可以使用$axios了,可是vue3没有this,所以需要用getCurrentInstance() 获取当前组件实例。 在app.vue里使用get请求数据 当然,VUE3也可以直接读取本地json文件

    2024年02月13日
    浏览(72)
  • vue3后台管理系统实现动态侧边导航菜单管理(ElementPlus组件)

    记住 一级(el-sub-menu)的都是只是展示的 点击跳转的都是一级下的子级(el-menu-item) 完整展示 1:在登陆功能进行登陆 获取menu列表 注册路由表的时候 把文件进行创建好 因为注册的方法需要获取这个路径 整个router下的main product等等都要创建 2:侧边菜单界面 router/index.ts

    2024年02月16日
    浏览(55)
  • vue+pdf.js预览本地pdf文件(可以复制文本,滚动页码展示)

    1、安装pdfjs-dist插件,推荐使用2.0.943这个版本 2、页面中引入使用 3、页面标签 3、解析pdf,获取pdf所有页数据,使用canvas渲染,并使用TextLayerBuilder创建文本层,可以复制文本信息 在渲染pdf数据时,当pdf文件很大渲染量很多时,会导致页面卡住,无法执行其他操作;这涉及到

    2024年01月21日
    浏览(51)
  • 045:Vue读取本地上传JSON文件,导出JSON文件方法

    第045个 查看专栏目录: VUE ------ element UI 在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。 (1)提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,upda

    2024年02月04日
    浏览(71)
  • vue3.0+element Plus实现页面布局,侧边栏菜单路由跳转

    一. 先在router.js文件中配置路由,将侧边栏中需要跳转的页面都添加到children中 二. 在view目录下新建一个文件,里面包含侧边栏要跳转的页面 三.  页面样式布局 1. 我选择使用自定义组件BaseLayout.vue文件来设置header和aside样式显示 也可以使用element plus中的Container 布局容器 

    2024年02月13日
    浏览(51)
  • 【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式

    掌握分寸感,找目标一致的人协同你,有效地调配资源,就可以提高效率。 写在前面的话 :博主最近想要搭建自己的前端若依项目,因此此系列博客会做一些记录。我的项目gitee地址: https://gitee.com/xuruicong/rachel-front-show 说明:只运行前端项目,只需要要下载官方项目http:

    2024年01月19日
    浏览(104)
  • Vue - 完美解决 Element UI 侧边导航菜单 <el-menu> 出现滚动条,去掉 Element 侧边导航组件的横纵滚动条(但滚动功能依然保留,仅仅是去掉 “滚动条“)100% 解决方案

    网上的教程都不好使(甚至还有的提议在全局去掉,这么做万一需要怎么办?),本文可完美 100% 解决,代码简洁高效。 本文实现了 Element UI 组件库中,去掉 NavMenu 侧边导航菜单组件出现的滚动条! 并且是 “局部” 的,也就是说只去掉本页侧边栏菜单的滚动条,不会影响全

    2024年02月11日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包