Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 795f183

Browse files
committed
{{变量}} 编译错误提示修复
1 parent 57a128e commit 795f183

File tree

7 files changed

+34
-23
lines changed

7 files changed

+34
-23
lines changed

‎.gitignore

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
node_modules
22
dist
3-
lib
4-
package-lock
5-
package-lock.json
3+
lib

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -329,8 +329,8 @@ Vue.use(VueUIDocs);
329329
.vc-snippet--code {
330330
box-sizing: border-box;
331331
border-top: 1px solid #ebedf0;
332-
333-
/deep/ {
332+
333+
::v-deep {
334334
code {
335335
background: #f9f9f9;
336336
font-family: Consolas, Menlo, Courier, monospace;

‎build/markdown-loader.js

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,36 @@ const MarkdownIt = require("markdown-it");
22
const MarkdownItContainer = require("markdown-it-container");
33
const VueTemplateComplier = require("vue-template-compiler");
44
const hljs = require("highlight.js");
5+
const hash = require("hash-sum");
56
const { parse, compileTemplate } = require("@vue/component-compiler-utils");
67

78
module.exports = function(source) {
89
// 需要解析成vue代码块集合
910
const componentCodeList = [];
1011
let styleCodeList = [];
12+
const delimiterCodeList = [];
1113
const globalScript = [];
1214
// 初始还MarkdownIt用于转换md文件为html
1315
const markdownIt = MarkdownIt({
1416
html: true,
1517
xhtmlOut: true,
1618
// 将markdown中的代码块用hljs高亮显示
17-
highlight: function(str, lang) {
18-
if (lang && hljs.getLanguage(lang)) {
19-
return `<pre class="hljs"><code>${
20-
hljs.highlight(lang, str, true).value
21-
}</code></pre>`;
19+
highlight: function(code, language) {
20+
let codeHtml;
21+
if (language && hljs.getLanguage(language)) {
22+
codeHtml = hljs.highlight(code, { language, ignoreIllegals: true }).value;
23+
} else {
24+
codeHtml = markdownIt.utils.escapeHtml(code);
2225
}
23-
return `<pre class="hljs"><code>${markdownIt.utils.escapeHtml(
24-
str
25-
)}</code></pre>`;
26-
}
26+
// 替换vue的变量分隔符 {{ }} 阻止二次变量编译错误
27+
const delimiterRegex = /\{\{.*?\}\}/g;
28+
codeHtml = codeHtml.replace(delimiterRegex, (value) => {
29+
const code = `data_${hash(value)}`;
30+
delimiterCodeList.push(`${code}:"${value}"`);
31+
return `{{${code}}}`;
32+
});
33+
return `<pre class="hljs"><code>${codeHtml}</code></pre>`;
34+
},
2735
});
2836
// 解析【:::tip:::】
2937
markdownIt.use(MarkdownItContainer, "tip");
@@ -49,15 +57,15 @@ module.exports = function(source) {
4957
let { template, script, styles } = parse({
5058
source: content,
5159
compiler: VueTemplateComplier,
52-
needMap: false
60+
needMap: false,
5361
});
5462
styleCodeList = styleCodeList.concat(styles);
5563
// 将template的转为render函数
5664
let templateCodeRender = "";
5765
if (template && template.content) {
5866
const { code } = compileTemplate({
5967
source: template.content,
60-
compiler: VueTemplateComplier
68+
compiler: VueTemplateComplier,
6169
});
6270
templateCodeRender = code;
6371
}
@@ -91,7 +99,7 @@ module.exports = function(source) {
9199
}
92100
return ` </div>
93101
</vc-snippet> `;
94-
}
102+
},
95103
});
96104
// 将所有转换好的代码字符串拼接成vue单组件template、script、style格式
97105
return `
@@ -106,10 +114,13 @@ module.exports = function(source) {
106114
name: 'vc-component-doc',
107115
components: {
108116
${componentCodeList.join(",")}
117+
},
118+
data(){
119+
return {${delimiterCodeList.join(",")}}
109120
}
110121
}
111122
</script>
112123
<style lang='scss'>
113-
${Array.from(styleCodeList, m => m.content).join("\n")}
124+
${Array.from(styleCodeList, (m) => m.content).join("\n")}
114125
</style>`;
115126
};

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@
2323
"eslint": "^6.7.2",
2424
"eslint-plugin-prettier": "^3.1.1",
2525
"eslint-plugin-vue": "^6.2.2",
26-
"highlight.js": "^9.18.1",
26+
"highlight.js": "^11.2.0",
2727
"lint-staged": "^9.5.0",
2828
"markdown-it": "^10.0.0",
2929
"markdown-it-container": "^2.0.0",
30-
"node-sass": "^4.12.0",
3130
"prettier": "^1.19.1",
31+
"sass": "^1.37.2",
3232
"sass-loader": "^8.0.2",
3333
"vue-template-compiler": "^2.6.11"
3434
},

‎site/components/snippet.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export default {
9696
box-sizing: border-box;
9797
border-top: 1px solid #ebedf0;
9898
99-
/deep/ {
99+
::v-deep {
100100
code {
101101
background: #f9f9f9;
102102
font-family: Consolas, Menlo, Courier, monospace;

‎site/router/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ Vue.use(VueRouter);
66
const routes = [
77
{
88
path: "/",
9-
name: "home",
109
component: () => import("../views/Home.vue"),
1110
children: [
1211
{

‎src/button/index.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,15 @@
3737
```html
3838
<template>
3939
<div>
40-
<v-button text="Default"@click="handleButtonClick"></v-button>
40+
<v-button @click="handleButtonClick">{{text}}</v-button>
4141
</div>
4242
</template>
4343

4444
<script>
4545
export default {
46+
data() {
47+
return { text: "Default" };
48+
},
4649
methods: {
4750
handleButtonClick() {
4851
alert(1);

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /