init

tangjinzhou · tangjinzhou · commit 4055147732b4 · 2018-01-25T10:40:54.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,7 @@
+*.log
+.cache
+.DS_Store
+.idea
+build
+dist
+node_modules
diff --git a/README.md b/README.md
@@ -0,0 +1,44 @@
+# vue-antd-md-loader
+
+md-loader based on [vue-markdown-loader](https://github.com/QingWei-Li/vue-markdown-loader)
+
+> Convert Markdown file to Vue Component using markdown-it.
+
+## Example
+
+[ant-design-vue](https://github.com/vueComponent/ant-design)
+
+## Installation
+
+```bash
+# For Vue2
+npm i vue-antd-md-loader -D
+```
+
+## Feature
+- Hot reload
+- Write vue script
+- Code highlight
+
+
+## Usage
+[Documentation: Using loaders](https://webpack.js.org/concepts/loaders/)
+
+`webpack.config.js` file:
+
+```javascript
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.md$/,
+        loader: 'vue-antd-md-loader'
+      }
+    ]
+  }
+};
+```
+
+## License
+WTFPL
+
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Demo</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="dist/build.js"></script>
+</body>
+</html>
diff --git a/example/src/app.vue b/example/src/app.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="markdown-body">
+    <markdown></markdown>
+  </div>
+</template>
+
+<script>
+import markdown from './markdown.md'
+import 'highlight.js/styles/github.css'
+import 'github-markdown-css'
+
+export default {
+  components: {
+    markdown
+  }
+}
+</script>
+<style>
+  .markdown-body {
+    box-sizing: border-box;
+    min-width: 200px;
+    max-width: 980px;
+    margin: 0 auto;
+    padding: 45px;
+  }
+</style>
diff --git a/example/src/custom.css b/example/src/custom.css
@@ -0,0 +1,4 @@
+.custom {
+  color: green;
+  font-size: 20px;
+}
diff --git a/example/src/entry.js b/example/src/entry.js
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import App from './app.vue'
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})
diff --git a/example/src/markdown.md b/example/src/markdown.md
@@ -0,0 +1,101 @@
+
+# Hello
+
+`<span>{{sss}}</span>`
+
+> This is test.
+
+- How are you?
+- Fine, Thank you, and you?
+- I'm fine， too. Thank you.
+- 🌚
+
+```javascript
+import Vue from 'vue'
+
+Vue.config.debug = true
+```
+
+<div class="test">
+  {{ model }} test
+</div>
+
+<compo>{{ model }}</compo>
+
+<div
+  class="abc"
+  @click="show = false">
+  啊哈哈哈
+</div>
+
+> All script or style tags in html mark will be extracted.Script will be excuted, and style will be added to document head.
+> Notice if there is a string instance which contains special word "&lt;/script>", it will fetch a SyntaxError.
+> Due to the complexity to solve it, just don't do that.
+```html
+<style scoped>
+  .test {
+    background-color: green;
+  }
+</style>
+
+<style scoped>
+  .abc {
+    background-color: yellow;
+  }
+</style>
+<script>
+  let a=1<2;
+  let b="<-forget it-/script>";
+  console.log("***This script tag is successfully extracted and excuted.***")
+  module.exports = {
+    components: {
+      compo: {
+        render(h) {
+          return h('div', {
+            style: {
+              background: 'red'
+            }
+          }, this.$slots.default);
+        }
+      }
+    },
+
+    data () {
+      return {
+        model: 'abc'
+      }
+    }
+  }
+</script>
+jjjjjjjjjjjjjjjjjjjjjj
+<template>
+  <div></div>
+</template>
+```
+
+
+
+<div>
+</div>
+
+sadfsfs
+
+大家哦哦好啊谁都发生地方上的冯绍峰s
+
+> sahhhh
+
+<compo>{{ model }}</compo>
+
+```html
+<compo>{{model }}{{model }}{{model }}{{model }}{{ model }}</compo>
+```
+
+
+
+<style src="./custom.css"></style>
+
+## 引入 style 文件
+
+<div class="custom">
+  原谅色
+</div>
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -0,0 +1,40 @@
+var resolve = require("path").resolve;
+var webpack = require("webpack");
+
+module.exports = {
+  entry: "./src/entry.js",
+  output: {
+    path: resolve(__dirname, "./dist"),
+    publicPath: "/dist/",
+    filename: "build.js"
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: "vue-loader"
+      },
+      {
+        test: /\.js$/,
+        loader: "babel-loader",
+        exclude: /node_modules/,
+        options: {
+          presets: ["es2015"]
+        }
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"]
+      },
+      {
+        test: /\.md$/,
+        loader: resolve(__dirname, "../index.js"),
+        options: {}
+      }
+    ]
+  },
+  devServer: {
+    historyApiFallback: true,
+    noInfo: true
+  }
+};
diff --git a/index.js b/index.js
@@ -0,0 +1 @@
+module.exports = require('./lib/core');
diff --git a/lib/core.js b/lib/core.js
@@ -0,0 +1,27 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+
+var markdownCompilerPath = path.resolve(__dirname, 'markdown-compiler.js');
+
+module.exports = function(source) {
+  this.cacheable();
+
+  this.options.__vueMarkdownOptions__ =
+    this.query || this.vueMarkdown || this.options.vueMarkdown || {};
+
+  var filePath = this.resourcePath;
+
+  var result =
+    'module.exports = require(' +
+    loaderUtils.stringifyRequest(
+      this,
+      '!!vue-loader!' +
+        markdownCompilerPath +
+        '?raw!' +
+        filePath +
+        (this.resourceQuery || '')
+    ) +
+    ');';
+
+  return result;
+};
diff --git a/lib/markdown-compiler.js b/lib/markdown-compiler.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

-Original file line number
+Diff line change
@@ @@ -0,0 +1,7 @@ @@
 +*.log
 +.cache
 +.DS_Store
 +.idea
 +build
 +dist
 +node_modules
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+module.exports = require('./lib/core');`