欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue?展示.md文件的方法詳解

 更新時間：2023年05月23日 09:52:27   作者：心動止于人海。  
這篇文章主要介紹了Vue?展示.md文件的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

1.下載所需package

npm i vue-markdown-loader -D
npm i vue-loader@14.2.2 -D

npm vue-template-compiler -D (若是已經(jīng)有則不需要安裝，不然有可能和現(xiàn)有的vue版本不匹配從而報錯)

vue-loader版本過高會不兼容，經(jīng)過測試安裝14.2.2版本可以使用

vue-template-compiler需要和vue的版本一致

（若是直接安裝vue-loader最新版會提示升級vue和vue-compiler,但是升級后的vue沒有和vue-template-compiler匹配的版本，所以我選擇降低vue-loader版本）

# 樣式
npm i github-markdown-css -D
npm i highlight.js -D

2.在vue.config.js配置

module.exports = {
  publicPath: './',
  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
   })
  },
}

3.在頁面使用

<template>
<!-- class markdown-body 必須加，否則標(biāo)簽樣式會出現(xiàn)問題 -->
<div class="markdown-body">
<markdown />
</div>
</template>
<script>

4.js引入

<script>
// 引? markdown ?件，引?后是?個組件，需要在 components 中注冊
import markdown from '@/assets/md/Android_MQTT.md'
// 代碼?亮
import 'highlight.js/styles/github.css'
import 'github-markdown-css'
// 其他元素使? github 的樣
export default {
  components: { markdown }
}
</script>

到此這篇關(guān)于Vue 展示.md文件的文章就介紹到這了,更多相關(guān)Vue 展示.md文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vuecli項目構(gòu)建SSR服務(wù)端渲染的實現(xiàn)

    vuecli項目構(gòu)建SSR服務(wù)端渲染的實現(xiàn)

    這篇文章主要介紹了vuecli項目構(gòu)建SSR服務(wù)端渲染的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10
  • vue后臺返回格式為二進(jìn)制流進(jìn)行文件的下載方式

    vue后臺返回格式為二進(jìn)制流進(jìn)行文件的下載方式

    這篇文章主要介紹了vue后臺返回格式為二進(jìn)制流進(jìn)行文件的下載方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-06-06
  • vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)

    vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)

    這篇文章主要介紹了vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • elementUI中el-upload文件上傳的實現(xiàn)方法

    elementUI中el-upload文件上傳的實現(xiàn)方法

    ElementUI的組件支持多種事件鉤子,如http-request、before-upload和on-change,以實現(xiàn)自定義文件上傳處理,這篇文章主要介紹了elementUI中el-upload文件上傳的實現(xiàn)方法,需要的朋友可以參考下
    2024-11-11
  • Vue中正確使用jQuery的方法

    Vue中正確使用jQuery的方法

    這篇文章主要為大家詳細(xì)介紹了Vue中正確使用jQuery的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-10-10
  • Vue?Baidu?Map之自定義點圖標(biāo)bm-marker的示例

    Vue?Baidu?Map之自定義點圖標(biāo)bm-marker的示例

    這篇文章主要介紹了Vue?Baidu?Map之自定義點圖標(biāo)bm-marker,文中給大家介紹了vue-baidu-api地圖標(biāo)記點（自定義標(biāo)記圖標(biāo)），設(shè)置標(biāo)記點的優(yōu)先級問題，結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2023-08-08
  • vue.js的手腳架vue-cli項目搭建的步驟

    vue.js的手腳架vue-cli項目搭建的步驟

    這篇文章主要介紹了vue.js的手腳架vue-cli項目搭建的步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • vite多頁面配置項目實戰(zhàn)

    vite多頁面配置項目實戰(zhàn)

    vite官方文檔中有關(guān)于多頁面應(yīng)用模式如果配置的說明,下面這篇文章主要給大家介紹了關(guān)于vite多頁面配置的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-04-04
  • Vue PostCSS的使用介紹

    Vue PostCSS的使用介紹

    postcss一種對css編譯的工具，類似babel對js的處理，postcss只是一個工具，本身不會對css一頓操作，它通過插件實現(xiàn)功能，autoprefixer就是其一
    2023-02-02
  • vue封裝axios的兩種方法總結(jié)

    vue封裝axios的兩種方法總結(jié)

    在不同的前端項目中使用相同的axios封裝有利于保持一致性,有利于數(shù)據(jù)之間的傳遞和處理,本文主要提供兩種對axios進(jìn)行封裝的思路,有需要的小伙伴可以參考一下
    2023-10-10

最新評論