vue-dotmd-loaderDocs|Githubwebpacklaoder工具包，用于将markdown文件转换为Vue组件。importDocComponentfrom'./doc.md'exportdefault{components:{DocComponent}}特性：[x]支持导入Vue文件组件并将其渲染为Vue组件实例[x]代码块支持高亮指定行[x]支持inmd编写Vue代码，定义脚本渲染到当前组件[x]支持定义当前组件样式样式[x]md添加totolist支持[x]支持代码块渲染组件（需要esm版本的Vue）[x]支持导入文件代码（渲染代码高亮）[x]支持导入源码（比如导入html片段，注意：不会通过markdown编译）详细使用方法：DocsUsage安装npminstall-Dvue-dotmd-loaderwebpackconfiguration{rules:[{测试：/\。md$/,使用:['vue-loader',//vue-dotmd-loader=>vue-loader必须{loader:'vue-dotmd-loader',options:options}]}]}options:{wrapperName:'DemoBlock',//定义demo包组件（请全局注册组件），如果为空，只渲染demofileDemoNamePerfix:'FileDemo',//文件demo组件名前缀blockDemoNamePerfix:'BlockCodeDemo',//代码块demo组件名称前缀fileDemoTag:'demo:vue',//文件demo标签；format:[demo:vue](filePath)blockDemoTag:'demo:vue',//代码块演示标签；format:````htmldemo:vuecode````includeCodeTag:'include:code',//导入代码，渲染成代码；格式：[include:code](filePath)inincludeRawTag:'include:raw',//导入html片段；format:[include:code](filePath)dest:false,//输出结果到文件；true/false/functiondest(code,contextPath,resourcePath){},//自定义写入文件markdown:{//markdown-it选项见：https://github.com/markdown-it/markdown-it#init-with-presets-and-optionsoptions:{html:false},notWrapper:false,init(md){md.use(otherPlugin)//添加markdown-it插件}}}eslintignore{"eslintIgnore":["**/*.md"]}如果需要匹配本页面相同的样式，请参考cssimport'github-markdown-css/github-markdown.css'import'highlight.js/styles/color-brewer.css'import'vue-dotmd-loader/src/docs.css'VueCLI如果使用Vuecli初始化的项目，请按如下配置。{//...configureWebpack:{resolve:{extensions:['.md'],}},chainWebpack(config){//参见：https://github.com/neutrinojs/webpack-chainconfig.module。rule('dotmd').test(/\.md$/).use('vue-loader').loader('vue-loader').options({...(config.module.rules.get('vue').uses.get('vue-loader').get('options')||null)//与vue-loader配置保持一致}).end().use('vue-dotmd-loader').loader('vue-dotmd-loader').options({dest:true,markdown:{options:{html:true}}}).end()}}
