优化webpack编译配置，markdown支持html，优化代码块内容显示

Aaron
1 parent 22fd4093
Showing 12 changed files with 25 additions and 73 deletions Show diff stats
.env
examples/components/string-html.vue
examples/main.js
examples/views/docs/component/detail.md
examples/views/docs/component/form.md
examples/views/docs/component/scheme.md
examples/views/docs/component/search.md
examples/views/docs/component/table.md
examples/views/docs/guide/introduce.md
examples/views/layout/component.vue
vue.config.js
webpack/markdown-loader.js
 # 版本号
-VUE_APP_VERSION = '0.5.4'
+VUE_APP_VERSION = '0.5.5'
 # 自定义变量 Cookie失效时间 1天
 VUE_APP_NAME = 'Eagle Web Tookit'
 \ No newline at end of file
@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <!-- 通过slot拿到html标签内容，渲染后删除slot -->
-    <span ref="raw" style="display: none;"><slot></slot></span>
-    <!-- 解析获取到的html字符串为html标签 -->
-    <div v-html="nodeHtml"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'stringHtml',
-  data() {
-    return {
-      nodeHtml: ''
-    };
-  },
-  mounted() {
-    const { $slots = {} } = this;
-    const defaultNodes = $slots.default || {};
-    const vnode = defaultNodes[0] || {};
-    const { elm = {} } = vnode;
-    this.nodeHtml = elm.innerText;
-    this.$refs.raw.parentNode.removeChild(this.$refs.raw);
-  }
-}
-</script>
 \ No newline at end of file
@@ -9,7 +9,6 @@ import ElementUI from &#39;element-ui&#39;;
 import EagleWebToolkit from '../packages';
 import NProgress from 'nprogress';
 import EagleCodeSnippet from "@/components/code-snippet";
-import EagleStringHtml from "@/components/string-html";
 import '@/styles/index.scss';
 import "highlight.js/styles/github.css";
@@ -46,7 +45,6 @@ NProgress.configure({ showSpinner: false });
 // 注册代码片段组件
 Vue.component("eagle-code-snippet", EagleCodeSnippet);
-Vue.component("eagle-string-html", EagleStringHtml);
 // 注册饿了么UI
 Vue.use(ElementUI);
 // 注册Eagle组件库
@@ -195,7 +195,7 @@ export default {
 -|-|-|-|-
 value / v-model |	绑定值 | Object | - | {}
 list | 表单项配置列表 | Array | - | []
-formProps | [el-form组件参数](https://element.eleme.cn/#/zh-CN/component/form#form-attributes) | Object | - | {}
+formProps | <a href="https://element.eleme.cn/#/zh-CN/component/form#form-attributes" target="_blank">el-form组件参数</a> | Object | - | {}
 span | 数据项占位 | Number | 0 - 24 | 8
 formatter | 格式化 | Function | - | -
 agentKey | 代理key，用另一个key的值表示当前内容 | String | - | -
@@ -241,7 +241,7 @@ export default {
 -|-|-|-|-
 value / v-model |	绑定值 | Object | - | -
 list | 表单项配置列表 | Array | - | []
-formProps | [el-form组件参数](https://element.eleme.cn/#/zh-CN/component/form#form-attributes) | Object | - | {}
+formProps | <a href="https://element.eleme.cn/#/zh-CN/component/form#form-attributes" target="_blank">el-form组件参数</a> | Object | - | {}
 span | 表单项占位 | Number | 0 - 24 | 24
 submitting | 提交按钮加载状态 | Boolean | true/false | false
 submitPure | 纯净提交，设置为true时submit的对象只会包含配置项配置过的字段 | Boolean | true/false | false
@@ -317,4 +317,4 @@ selection | 选中表格内容时触发 | selection
 -|-|-|-|-
 include | 包含在哪些组件中 | String,Array | - | ['search', 'table', 'form']
 exclude | 不包含在哪些组件中 | String,Array | - | []
-其它参数 | 同时包含Form、Table、Search、Detail配置项的参数 | - | - | -
 \ No newline at end of file
+其它参数 | 同时包含Form、Table、Search、Detail配置项的参数 <a onclick="window.$message.success('成功！')">测试</a> | - | - | -
 \ No newline at end of file
@@ -50,7 +50,7 @@ export default {
 ```html
 <template>
-  <eagle-search :list="searchList">
+  <eagle-search :list="searchList" :span="8">
     <template #type="{ model }">
       <el-select v-model="model.type">
         <el-option value="A">选项A</el-option>
@@ -100,7 +100,7 @@ export default {
 -|-|-|-|-
 value / v-model |	绑定值 | Object | - | -
 list | 表单项配置列表 | Array | - | []
-formProps | [el-form组件参数](https://element.eleme.cn/#/zh-CN/component/form#form-attributes) | Object | - | {}
+formProps | <a href="https://element.eleme.cn/#/zh-CN/component/form#form-attributes" target="_blank">el-form组件参数</a> | Object | - | {}
 span | 表单项占位 | Number | 0 - 24 | 6
 searching | 查询按钮加载状态 | Boolean | true/false | false
@@ -4,7 +4,7 @@
 ## 基础用法
-创建一个基础表格，配置项支持[el-table-column组件参数](https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes)
+创建一个基础表格，配置项支持<a href="https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes" target="_blank">el-table-column组件参数</a>
 ::: snippet 使用`list`属性设置数据源，每一项都已设置为**el-table-column**
@@ -163,7 +163,7 @@ tableEvents | ElementUI表格事件 | Object | - | {}
 ## Methods 方法
-可以通过引用`$ref`获取到el-table的实体对象`instance`，从而使用[el-table](https://element.eleme.cn/#/zh-CN/component/table#table-methods)的所有方法
+可以通过引用`$ref`获取到el-table的实体对象`instance`，从而使用<a href="https://element.eleme.cn/#/zh-CN/component/table#table-methods" target="_blank">el-table</a>的所有方法
 ## List 表单项配置列表
@@ -174,4 +174,4 @@ tableEvents | ElementUI表格事件 | Object | - | {}
 key | 参数名 | String | - | -
 label | 参数标签 | String | - | -
 visible | 表格列显示状态 | Boolean,Function(tableData: array) | - | true
-其它参数 | [el-table-column组件参数](https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes) | Any | - | -
 \ No newline at end of file
+其它参数 | <a href="https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes" target="_blank">el-table-column组件参数</a> | Any | - | -
 # {{ appName }}
-`{{ appName }}` 是在基于**Vue 2.0**的 [**Element**](https://element.eleme.cn) 组件库基础上的扩展组件库，主要用于快速生成企业后台管理项目。
+`{{ appName }}` 是在基于**Vue 2.0**的 <a href="https://element.eleme.cn/#/zh-CN" target="_blank">Element</a> 组件库基础上的扩展组件库，主要用于快速生成企业后台管理项目。
 ## 特性
 数据驱动视图、组件模块化替换、任意组件渲染
-::: html
 <div style="display: flex; align-items: center;padding: 30px 0;">
   <img src="/img/vue.svg" style="width: 100px;" />
   <i class="el-icon-plus" style="padding: 0 40px;"></i>
@@ -14,11 +13,10 @@
   <i class="el-icon-right" style="padding: 0 40px;"></i>
   <img src="/img/logo.svg" style="width: 100px;" />
 </div>
-:::
 **Vue.js**提供核心驱动，**Element**组成基本结构，{{ appName }}渲染配置数据
 ## 谁在使用
-* [翌车科技](http://www.yichekeji.com/)
-* [申服科技](http://www.shenfutech.com/)
 \ No newline at end of file
+* <a href="http://www.yichekeji.com/" target="_blank">翌车科技</a>
+* <a href="http://www.shenfutech.com/" target="_blank">申服科技</a>
@@ -99,9 +99,10 @@ export default {
       this.anchorList = [];
       const domList = document.querySelectorAll('.header-anchor');
       let anchorList = [];
+      let anchorBreak = false;
       for (let index in domList) {
         let dom = domList[index] || {};
-        if (dom.addEventListener) {
+        if (dom.parentNode) {
           dom.addEventListener('click', e => {
             // 阻止a标签的默认行为
             e = e || window.event;
@@ -109,14 +110,13 @@ export default {
             document.documentElement.scrollTop = dom.offsetTop - headerHeight;
             this.$router.replace({ path: this.$route.path, hash: dom.hash });
           });
-        }
-        if (dom.parentNode) {
-          const text = `${dom.parentNode.innerHTML}`.replace(/<\/?.*[^>]*>/g, '').trim();
-          if (text === 'API') {
-            break;
-          } else {
+          const text = `${dom.parentNode.innerHTML}`.replace(/<\/?.*[^>]*>/g, '').trim(); // 从innerHTML中去掉其它标签获及空格取文本内容
+          if (text === 'API') { // 跳过API及之后的锚点
+            anchorBreak = true;
+          }
+          if (!anchorBreak) {
             anchorList.push({
-              text: `${dom.parentNode.innerHTML}`.replace(/<\/?.*[^>]*>/g, '').trim(),
+              text,
               href: dom.href,
               hash: dom.hash,
             });
@@ -190,7 +190,7 @@ export default {
       text-decoration: none;
       padding: 5px 20px;
       color: $text;
-      transition: all 300ms;
+      transition: all 300ms ease-out;
       border-left: 1px solid $border;
       cursor: pointer;
     }
@@ -59,7 +59,7 @@ module.exports = {
   // },
   // webpack-dev-server 相关配置
   devServer: {
-    open: false,
+    open: true,
     host: '0.0.0.0',
     port: 8888,
     https: false,
@@ -12,16 +12,13 @@ module.exports = source =&gt; {
   let styleCodeList = [];
   // 初始还MarkdownIt用于转换md文件为html
   const markdownIt = MarkdownIt({
+    html: true,
     // 将markdown中的代码块用hljs高亮显示
     highlight: (str, lang) => {
       if (lang && hljs.getLanguage(lang)) {
-        return `<pre class="hljs"><code>${
-          hljs.highlight(lang, str.replace(/\{\{/g, '{ {').replace(/\}\}/g, '} }'), true).value
-        }</code></pre>`;
+        return `<pre class="hljs" v-pre><code>${hljs.highlight(lang, str, true).value}</code></pre>`;
       }
-      return `<pre class="hljs"><code>${markdownIt.utils.escapeHtml(
-        str.replace(/\{\{/g, '{ {').replace(/\}\}/g, '} }')
-      )}</code></pre>`;
+      return `<pre class="hljs" v-pre><code>${markdownIt.utils.escapeHtml(str)}</code></pre>`;
     }
   });
   // 使用【markdown-it-anchor】插件为markdown创建锚点
@@ -92,20 +89,6 @@ module.exports = source =&gt; {
                 </eagle-code-snippet> `;
     }
   });
-  // 使用【markdown-it-container】插件解析【:::html :::】代码块为vue渲染
-  markdownIt.use(MarkdownItContainer, "html", {
-    // 验证代码块为【:::html :::】才进行渲染
-    validate(params) {
-      return params.trim().match(/^html\s*(.*)$/);
-    },
-    // 代码块渲染
-    render(tokens, index) {
-      if (tokens[index].nesting === 1) {
-        return `<eagle-string-html>`;
-      }
-      return `</eagle-string-html>`;
-    }
-  });
   // 将所有转换好的代码字符串拼接成vue单组件template、script、style格式
   return `
     <template>
1	# 版本号	1	# 版本号
2	-VUE_APP_VERSION = '0.5.4'	2	+VUE_APP_VERSION = '0.5.5'
3	# 自定义变量 Cookie失效时间 1天	3	# 自定义变量 Cookie失效时间 1天
4	VUE_APP_NAME = 'Eagle Web Tookit'	4	VUE_APP_NAME = 'Eagle Web Tookit'
5	\ No newline at end of file	5	\ No newline at end of file
	@@ -1,27 +0,0 @@		@@ -1,27 +0,0 @@
1	-<template>
2	- <div>
3	- <!-- 通过slot拿到html标签内容，渲染后删除slot -->
4	- <span ref="raw" style="display: none;"><slot></slot></span>
5	- <!-- 解析获取到的html字符串为html标签 -->
6	- <div v-html="nodeHtml"></div>
7	- </div>
8	-</template>
9	-
10	-<script>
11	-export default {
12	- name: 'stringHtml',
13	- data() {
14	- return {
15	- nodeHtml: ''
16	- };
17	- },
18	- mounted() {
19	- const { $slots = {} } = this;
20	- const defaultNodes = $slots.default \|\| {};
21	- const vnode = defaultNodes[0] \|\| {};
22	- const { elm = {} } = vnode;
23	- this.nodeHtml = elm.innerText;
24	- this.$refs.raw.parentNode.removeChild(this.$refs.raw);
25	- }
26	-}
27	-</script>
28	\ No newline at end of file	0	\ No newline at end of file
	@@ -195,7 +195,7 @@ export default {		@@ -195,7 +195,7 @@ export default {
195	-\|-\|-\|-\|-	195	-\|-\|-\|-\|-
196	value / v-model \| 绑定值 \| Object \| - \| {}	196	value / v-model \| 绑定值 \| Object \| - \| {}
197	list \| 表单项配置列表 \| Array \| - \| []	197	list \| 表单项配置列表 \| Array \| - \| []
198	-formProps \| [el-form组件参数](https://element.eleme.cn/#/zh-CN/component/form#form-attributes) \| Object \| - \| {}	198	+formProps \| <a href="https://element.eleme.cn/#/zh-CN/component/form#form-attributes" target="_blank">el-form组件参数</a> \| Object \| - \| {}
199	span \| 数据项占位 \| Number \| 0 - 24 \| 8	199	span \| 数据项占位 \| Number \| 0 - 24 \| 8
200	formatter \| 格式化 \| Function \| - \| -	200	formatter \| 格式化 \| Function \| - \| -
201	agentKey \| 代理key，用另一个key的值表示当前内容 \| String \| - \| -	201	agentKey \| 代理key，用另一个key的值表示当前内容 \| String \| - \| -
	@@ -241,7 +241,7 @@ export default {		@@ -241,7 +241,7 @@ export default {
241	-\|-\|-\|-\|-	241	-\|-\|-\|-\|-
242	value / v-model \| 绑定值 \| Object \| - \| -	242	value / v-model \| 绑定值 \| Object \| - \| -
243	list \| 表单项配置列表 \| Array \| - \| []	243	list \| 表单项配置列表 \| Array \| - \| []
244	-formProps \| [el-form组件参数](https://element.eleme.cn/#/zh-CN/component/form#form-attributes) \| Object \| - \| {}	244	+formProps \| <a href="https://element.eleme.cn/#/zh-CN/component/form#form-attributes" target="_blank">el-form组件参数</a> \| Object \| - \| {}
245	span \| 表单项占位 \| Number \| 0 - 24 \| 24	245	span \| 表单项占位 \| Number \| 0 - 24 \| 24
246	submitting \| 提交按钮加载状态 \| Boolean \| true/false \| false	246	submitting \| 提交按钮加载状态 \| Boolean \| true/false \| false
247	submitPure \| 纯净提交，设置为true时submit的对象只会包含配置项配置过的字段 \| Boolean \| true/false \| false	247	submitPure \| 纯净提交，设置为true时submit的对象只会包含配置项配置过的字段 \| Boolean \| true/false \| false
	@@ -50,7 +50,7 @@ export default {		@@ -50,7 +50,7 @@ export default {
50		50
51	```html	51	```html
52	<template>	52	<template>
53	- <eagle-search :list="searchList">	53	+ <eagle-search :list="searchList" :span="8">
54	<template #type="{ model }">	54	<template #type="{ model }">
55	<el-select v-model="model.type">	55	<el-select v-model="model.type">
56	<el-option value="A">选项A</el-option>	56	<el-option value="A">选项A</el-option>
	@@ -100,7 +100,7 @@ export default {		@@ -100,7 +100,7 @@ export default {
100	-\|-\|-\|-\|-	100	-\|-\|-\|-\|-
101	value / v-model \| 绑定值 \| Object \| - \| -	101	value / v-model \| 绑定值 \| Object \| - \| -
102	list \| 表单项配置列表 \| Array \| - \| []	102	list \| 表单项配置列表 \| Array \| - \| []
103	-formProps \| [el-form组件参数](https://element.eleme.cn/#/zh-CN/component/form#form-attributes) \| Object \| - \| {}	103	+formProps \| <a href="https://element.eleme.cn/#/zh-CN/component/form#form-attributes" target="_blank">el-form组件参数</a> \| Object \| - \| {}
104	span \| 表单项占位 \| Number \| 0 - 24 \| 6	104	span \| 表单项占位 \| Number \| 0 - 24 \| 6
105	searching \| 查询按钮加载状态 \| Boolean \| true/false \| false	105	searching \| 查询按钮加载状态 \| Boolean \| true/false \| false
106		106
	@@ -59,7 +59,7 @@ module.exports = {		@@ -59,7 +59,7 @@ module.exports = {
59	// },	59	// },
60	// webpack-dev-server 相关配置	60	// webpack-dev-server 相关配置
61	devServer: {	61	devServer: {
62	- open: false,	62	+ open: true,
63	host: '0.0.0.0',	63	host: '0.0.0.0',
64	port: 8888,	64	port: 8888,
65	https: false,	65	https: false,
	@@ -12,16 +12,13 @@ module.exports = source => {		@@ -12,16 +12,13 @@ module.exports = source => {
12	let styleCodeList = [];	12	let styleCodeList = [];
13	// 初始还MarkdownIt用于转换md文件为html	13	// 初始还MarkdownIt用于转换md文件为html
14	const markdownIt = MarkdownIt({	14	const markdownIt = MarkdownIt({
		15	+ html: true,
15	// 将markdown中的代码块用hljs高亮显示	16	// 将markdown中的代码块用hljs高亮显示
16	highlight: (str, lang) => {	17	highlight: (str, lang) => {
17	if (lang && hljs.getLanguage(lang)) {	18	if (lang && hljs.getLanguage(lang)) {
18	- return `<pre class="hljs"><code>${
19	- hljs.highlight(lang, str.replace(/\{\{/g, '{ {').replace(/\}\}/g, '} }'), true).value
20	- }</code></pre>`;	19	+ return `<pre class="hljs" v-pre><code>${hljs.highlight(lang, str, true).value}</code></pre>`;
21	}	20	}
22	- return `<pre class="hljs"><code>${markdownIt.utils.escapeHtml(
23	- str.replace(/\{\{/g, '{ {').replace(/\}\}/g, '} }')
24	- )}</code></pre>`;	21	+ return `<pre class="hljs" v-pre><code>${markdownIt.utils.escapeHtml(str)}</code></pre>`;
25	}	22	}
26	});	23	});
27	// 使用【markdown-it-anchor】插件为markdown创建锚点	24	// 使用【markdown-it-anchor】插件为markdown创建锚点
	@@ -92,20 +89,6 @@ module.exports = source => {		@@ -92,20 +89,6 @@ module.exports = source => {
92	</eagle-code-snippet> `;	89	</eagle-code-snippet> `;
93	}	90	}
94	});	91	});
95	- // 使用【markdown-it-container】插件解析【:::html :::】代码块为vue渲染
96	- markdownIt.use(MarkdownItContainer, "html", {
97	- // 验证代码块为【:::html :::】才进行渲染
98	- validate(params) {
99	- return params.trim().match(/^html\s(.)$/);
100	- },
101	- // 代码块渲染
102	- render(tokens, index) {
103	- if (tokens[index].nesting === 1) {
104	- return `<eagle-string-html>`;
105	- }
106	- return `</eagle-string-html>`;
107	- }
108	- });
109	// 将所有转换好的代码字符串拼接成vue单组件template、script、style格式	92	// 将所有转换好的代码字符串拼接成vue单组件template、script、style格式
110	return `	93	return `
111	<template>	94	<template>