【筆記】在Vue裡使用 vue-cli3，引入MarkDown檔

因為要編寫技術文件，考慮之後用md檔來寫是最快的，框架是Vue，
所以開始尋找可以把md檔import進vue，而且會自動轉譯成HTML的方法。

試了2個套件，還是不太貼近需求

• vue-markdown
• markdown-it-vue

最後選擇的是這個VUE-CLI3， vue-markdown-loader

以下記錄使用方式

安裝

npm i vue-markdown-loader -D
npm i  vue-loader vue-template-compiler -D
# 樣式
npm i github-markdown-css -D
npm i highlight.js -D

配置

// vue.config.js 如果没有就在項目根目錄新建
module.exports = {
  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
      })
  }
}

使用

<template>
	<!-- class markdown-body 必須加，否則標籤樣式會出現問題 -->
  <div class="markdown-body">
    <markdown />
  </div>
</template>

<script>
// 引入 markdown 文件，引入後是一個组件，需要在 components 中註冊
import markdown from '@/assets/ApiDocument.md'
// 代碼樣式
import 'highlight.js/styles/github.css'
// 其他元素使用 github 的樣式
import 'github-markdown-css'
export default {
  components: {
    markdown
  },
}
</script>

代碼塊中的語法高亮

輸入

``` js
export default {
  name: 'MyComponent',
  // ...
}
``` 

輸出

export default {
  name: 'MyComponent',
  // ...
} 

輸入

``` html
<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>
``` 

輸出

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>




備註

在安裝完後， npm run serve 後顯示錯誤，

原來是vue版本太舊，需要更新到版本 2.6.12

更新時也遇到問題，跑完更新後還是一直維持在 2.6.11，

後來PG大大直接心一橫，把package.json內的 "vue": "^2.6.11"，

直接改成 "vue": "^2.6.12"，

vue渲染後，就完美的把md檔轉譯成html啦～撒花～～撒花～～再撒花～～