[TOC] **参考elementUi的方式** ## 1,安装扩展 ``` //安装语法高亮 npm i highlight -D // 安装markdown相关依赖 npm i markdown-it markdown-it-anchor markdown-it-container markdown-it-chain -D //安装vue编译器 用于 npm i @vue/component-compiler-utils -D //安装vue-markdown-loader，解析.md文件为.vue文件 npm i vue-markdown-loader -D ``` ## 2,配置webpack的module.rules ### cli3 ``` module.exports = { configureWebpack: config => { config.module.rules.push({ // 处理markdown文件 test: /\.md$/, use: [ { loader: "vue-loader" }, { //创建一个js文件,用于将处理后的md文件处理为vue文件 loader: require.resolve("./src/common/markdownLoader") } ], }, ); } }; ``` ## 3,处理markdown文件为vue组件 阿斯顿发士大夫