-
Notifications
You must be signed in to change notification settings - Fork 0
/
vue.config.js
131 lines (123 loc) · 4.45 KB
/
vue.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
const md = require('markdown-it')()
//const slugify = require('transliteration').slugify;
const striptags = require('./strip-tags');
function convert(str) {
str = str.replace(/(&#x)(\w{4});/gi, function($0) {
return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16));
});
return str;
}
module.exports = {
//解决打包后空白
publicPath: '/',
lintOnSave:false,//关闭eslint检测
// 修改 src 为 examples
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html'
}
},
// 强制内联CSS
//css: { extract: false },
// 扩展 webpack 配置,使 packages 加入编译
chainWebpack: config => {
config.module
.rule('js')
.include
.add('/packages')
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
// 修改它的选项...
return options
}),
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,
use: [
// anchor 是用来放到每一个标题前的导航作用 我不需要
// [
// require('markdown-it-anchor'), {
// level: 2,
// slugify: slugify,
// permalink: true,
// permalinkBefore: true
// }
//],
[require('markdown-it-container'), 'demo', {
validate: function(params) {
return params.trim().match(/^demo\s*(.*)$/);
},
render: function(tokens, idx) {
var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
if (tokens[idx].nesting === 1) {
var description = (m && m.length > 1) ? m[1] : '';
var content = tokens[idx + 1].content;
var html = convert(striptags.strip(content, ['script', 'style'])).replace(/(<[^>]*)=""(?=.*>)/g, '$1');
var script = striptags.fetch(content, 'script');
var style = striptags.fetch(content, 'style');
var jsfiddle = { html: html, script: script, style: style };
var descriptionHTML = description
? md.render(description)
: '';
jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle));
return `<demo-block class="demo-box" :jsfiddle="${jsfiddle}">
<div class="source" slot="source">${html}</div>
${descriptionHTML}
<div class="highlight" slot="highlight">`;
}
return '</div></demo-block>\n';
}
}],
[require('markdown-it-container'), 'tip'],
[require('markdown-it-container'), 'warning']
]
})
},
//以下方式可以在别的地方 可以引入md文件并查看,还可以在识别md的组件中展示 例如mavon-editor 可以引入md后 直接绑定在该组件的v-html上直接展示
// configureWebpack: (config) => {
// config.module.rules.push({
// test: /\.md$/,
// use: [
// { loader: 'html-loader' },
// {
// loader: 'markdown-loader',
// options: {}
// }
// ]
// })
// }
// [require('markdown-it-container'), 'demo', {
// validate: function (params) {
// return params.trim().match(/^demo\s*(.*)$/)
// },
// render: function (tokens, idx) {
// console.log(tokens, idx)
// if (tokens[idx].nesting === 1) {
// // 1.获取第一行的内容使用markdown渲染html作为组件的描述
// let demoInfo = tokens[idx].info.trim().match(/^demo\s+(.*)$/)
// let description = (demoInfo && demoInfo.length > 1) ? demoInfo[1] : ''
// let descriptionHTML = description ? markdownRender.render(description) : ''
// // 2.获取代码块内的html和js代码
// let content = tokens[idx + 1].content
// // 3.使用自定义开发组件【DemoBlock】来包裹内容并且渲染成案例和代码示例
// return `<demo-block>
// <div class="source" slot="source">${content}</div>
// ${descriptionHTML}
// <div class="highlight" slot="highlight">`
// } else {
// return '</div></demo-block>\n'
// }
// }
// }]
}