vue-cli 3.0 配置文件

Author: kitorv

README.md

@@ -8,9 +8,9 @@
 
 ### [document](https://github.com/kitorv/study-notes/blob/master/vue/VUE-01.md)
 
-## vue-cli3.0 环境搭建
+## vue-cli 3.0 环境配置
 
-### [vue-cli3.0](https://github.com/kitorv/vue-md-doc)
+### [vue.config.js](src/vue.config.js)
 
 ## Overview
 

src/vue.config.js

@@ -0,0 +1,52 @@
+module.exports = {
+  // 配置【vue-markdown-loader】解析md格式的文件
+  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,
+        preventExtract: true,
+        use: [
+          [
+            require("markdown-it-container"),
+            "example-code",
+            {
+              validate: function(params) {
+                return params.trim().match(/^demo\s+(.*)$/)
+              },
+              render(tokens, index) {
+                let { nesting, info } = tokens[index]
+                if (nesting === 1) {
+                  // 1.获取代码块的描述内容
+                  let content = info.trim().match(/^demo\s+(.*)$/) || []
+                  let description = content.length > 1 ? content[1] : ""
+                  var md = require("markdown-it")()
+                  if (description) {
+                    description = md.render(description)
+                  }
+                  // 2.获取代码块内的html和js代码
+                  let code = tokens[index + 1].content
+                  // 3.代码块包裹
+                  return `
+                    <k-example-code>
+                        <div class="source" slot="source">${code}</div>
+                         ${description}
+                        <div class="highlight" slot="code">`
+                } else {
+                  return `
+                        </div>
+                    </k-example-code>\n`
+                }
+              }
+            }
+          ]
+        ]
+      })
+  }
+}