vue-cli3 導入.md文件，vue中markdown文件的解析與渲染

1. package.json文件中添加以下依賴，然后重新運行npm install

"vue-template-compiler": "2.6.10",
"github-markdown-css": "^4.0.0",
"highlight.js": "^10.5.0",
"html-loader": "^1.3.2",
"markdown-it": "^12.0.4",
"markdown-it-container": "^3.0.0",
"markdown-loader": "^6.0.0",
"vue-loader": "^15.9.6",
"vue-markdown-loader": "^2.4.1"

2. 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({
          wrapper: 'article',
          wrapperName: '123',
          raw: true,
          preventExtract: true,
          use: [
            [require('markdown-it-container'), 'tip'],
            [require('markdown-it-container'), 'warning'],
            [require('markdown-it-container'), 'danger'],
            [require('markdown-it-container'), 'details'],
          ],
        })
        // .end()
  }
}

3. main.js中添加：

import 'github-markdown-css'

4. App.vue中引入.md文件：

  <div id="app">
    <div class="markdown-body">
      <markdown-test>
        <template v-slot:footer>
          <div>test</div>
          <button>footer</button>
        </template>
      </markdown-test>
    </div>
  </div>

<script>
import markdownTest from './components/markdownTest.md'

export default {
  name: 'App',
  components: {
    markdownTest
  }
}
</script>

5. markdownTest.md文件的編寫：

#### 按鈕狀態

1. 普通狀態
2. hover 鼠標懸停狀態
3. active 點擊狀態
4. focus 獲取焦點狀態
5. 忙碌/等待狀態
6. 禁用狀態

​```scss
button {  
    background: orange;
    &:hover {
        
    }
    &:active {
        
    }
    &:focus {
        
    }
    &.busy {
        
    }
    &:disabled {
        
    }
}
​```

<slot name="footer"></slot>

::: warning
注意：
:::

::: danger
警告：
:::

::: tip
提示：這是一段提示
:::

```md
{{ 1 + 1 }}

vue.config.js中配置markdown-it-container是為了渲染引用塊的樣式和vuepress中的類似，.md文件中支持插槽的寫法，還能引入全局組件。