版权声明:将遇到的问题,记录下来,方便自己也方便大家。 本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/y491887095/article/details/80536038
在我们开发vue组件的过程中,希望把markdown文档写的插件使用说明,也展现到页面中。那么具体怎么做呢?
1、安装vue-markdown-loader
npm install vue-markdown-loader --save
npm install markdown-it-container --save
2、为webpack配置loader
{
test: /\.md$/,
loader: 'vue-markdown-loader',
options: vueMarkdown
}
3、配置options
为vue-markdown-loader
配置options。
这一部分的代码主要是将markDown的源码转换成,html代码。注意里面有几处用到了自定义的工具类,在utils.js下,后面会附带源码。
这个options是被作为一个独立的模块使用的,建议复制出来后以一个独立的文件保存在build文件夹中。
const striptags = require('./strip-tag');
const vueMarkdown = {
preprocess: (MarkdownIt, source) => {
MarkdownIt.renderer.rules.table_open = function () {
return '<table class="table">'
}
MarkdownIt.renderer.rules.fence = utils.wrapCustomClass(MarkdownIt.renderer.rules.fence)
// ```code`` 给这种样式加个class code_inline
const code_inline = MarkdownIt.renderer.rules.code_inline
MarkdownIt.renderer.rules.code_inline = function(...args){
args[0][args[1]].attrJoin('class', 'code_inline')
return code_inline(...args)
}
return source
},
use: [
[require('markdown-it-container'), 'demo', {
validate: params => params.trim().match(/^demo\s*(.*)$/),
render: function(tokens, idx) {
var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
if (tokens[idx].nesting === 1) {
var desc = tokens[idx + 2].content;
const html = utils.convertHtml(striptags(tokens[idx + 1].content, 'script'))
// 移除描述,防止被添加到代码块
tokens[idx + 2].children = [];
return `<demo-block>
<div slot="desc">${html}</div>
<div slot="highlight">`;
}
return '</div></demo-block>\n';
}
}],
[require('markdown-it-container'), 'tip'],
/* or */
[require('markdown-it-container'), 'warning']
]
};
exports.vueMarkdown = vueMarkdown;
在这段代码顶部,我们引入了striptags
。这个模块是用来解析示例代码的。strip-tag的具体内容。
const cheerio = require('cheerio')
//cheerio是nodejs的抓取页面模块,为服务器特别定制的,快速、灵活、实施的jQuery核心实现。适合各种Web爬虫程序。
module.exports = (str, tags) => {
const $ = cheerio.load(str, { decodeEntities: false })
if (!tags || tags.length === 0) {
return str
}
tags = !Array.isArray(tags) ? [tags] : tags
let len = tags.length
while (len--) {
$(tags[len]).remove()
}
return $.html()
}
在webpack的build目录下的utils.js中添加下面的两个方法
/**
* 增加 hljs 的 classname
*/
exports.wrapCustomClass = function (render) {
return function (...args) {
return render(...args)
.replace('<code class="', '<code class="hljs ')
.replace('<code>', '<code class="hljs">')
}
};
/**
* Format HTML string
*/
exports.convertHtml = function (str) {
return str.replace(/(&#x)(\w{4});/gi, $0 => String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16)))
};
4、配置展示mark-down文档的vue页面
准备一个名叫demo-block的vue文件,放在你喜欢的地方。然后注册全局组件。
注意,在注册全局组件时,一定是叫demo-block。
import demoBlock from './components/demo-block.vue';
Vue.component('demo-block', demoBlock);
demo-block.vue文件的源码。
<template>
<div
class="demo-block"
:class="[{ 'hover': hovering }]"
@mouseenter="hovering = true"
@mouseleave="hovering = false">
<slot name="source"></slot>
<div class="meta" ref="meta">
<div class="description" v-if="$slots.default">
<slot></slot>
</div>
<slot name="highlight"></slot>
</div>
</div>
</template>
<script type="text/babel">
export default {
data () {
return {
hovering: false,
}
},
}
</script>
5、设置路由
大家会发现,每一个markddow文档对应一个路由,所以我们切换markDown的时候,其实是切换的是子路由页面。
import Vue from 'vue';
import Router from 'vue-router';
import loadMap from '@/components/loadMap.vue';
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'loadMap',
component: loadMap,
redirect:{ name : 'home' },
children: [
{
path: '/home',
name: 'home',
component: r => require.ensure([], () => r(require('../docs/readme.md')))
},
{
path: '/test',
name: 'test',
component: r => require.ensure([], () => r(require('../docs/hello.md')))
}
]
}
]
})
6、编写一个模板文档
@这是我们展示的说明文档
**三维测量 measure**
### 基本用法
* @param type 测量类型
* line 直线测量
* area 面积测量
* vertical 垂直测量
* horizontal 水平测量
-----
@这部分是页面上可以交互的代码
<div class="measure-ct">
<button @click="measure('line')">直线测量</button>
<button @click="measure('area')">面积测量</button>
<button @click="measure('vertical')">垂直测量</button>
<button @click="measure('horizontal')">水平测量</button>
<button @click="measureCancel">清除测量结果</button>
</div>
<br>
::: demo
@这部分是我们展示的示例代码
```shell
import {cw5} from 'cw3d/index.js';
cw5.measure.measureMent(type)
```
```html
<template>
<div>
<div class="measure-ct">
<button @click="measure('line')">直线测量</button>
<button @click="measure('area')">面积测量</button>
<button @click="measure('vertical')">垂直测量</button>
<button @click="measure('horizontal')">水平测量</button>
<button @click="measureCancel">取消测量模式</button>
</div>
</div>
</template>
<script>
import {cw5} from 'cw3d/index.js';
export default {
name: 'measure',
methods: {
measure(type){
cw5.measure.measureMent(type)
},
measureCancel(){
cw5.measure.measureCancel()
}
}
}
</script>
```
:::
7、优化样式—-引入文档模块的css文件
这个css文件有两个版本,一个lass、一个css。通常css引入就可以。
扫描二维码关注公众号,回复:
3112082 查看本文章
![](/qrcode.jpg)
可以在任意需要css渲染的文件中,引入这个css文件。
<style>
@import "../assets/docs.css";
.example-block{
display: flex;
}
</style>
要引入的docs.css文件。
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td,
iframe {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
body {
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
background-color: #f8f8f8;
}
a {
color: #4078c0;
text-decoration: none;
}
button, input, select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}
ul, ol {
list-style: none;
}
code.hljs {
line-height: 1.5;
font-family: Source Code Pro, Menlo, Monaco, Consolas, Courier, monospace;
font-size: 12px;
padding: 20px;
background-color: #2a3138;
border: solid 1px #E5E5E5;
margin-bottom: 25px;
border-radius: 4px;
-webkit-font-smoothing: auto;
}
.clearfix::before {
display: table;
content: "";
}
.clearfix::after {
display: table;
content: "";
clear: both;
}
.main-content {
width: 50%;
margin: 50px 20px 40px;
border: 1px solid #f2f2f2;
}
.main-content .page-tip {
position: absolute;
left: 50%;
top: 60px;
transform: translatex(-50%);
height: 60px;
line-height: 60px;
font-size: 24px;
color: #0067ed;
}
.page-container {
background-color: #fff;
position: relative;
display: flex;
width: 100%;
overflow: hidden;
}
.page-content {
box-sizing: border-box;
flex: 1;
}
.page-content section {
padding: 0 40px;
}
.page-content section > h1,
.page-content section > h2,
.page-content section > h3,
.page-content section > h4,
.page-content section > h5,
.page-content section > h6 {
color: #333;
line-height: 1.5;
margin: 20px 0;
font-weight: normal;
}
.page-content section > h1:hover a,
.page-content section > h2:hover a,
.page-content section > h3:hover a,
.page-content section > h4:hover a,
.page-content section > h5:hover a,
.page-content section > h6:hover a {
opacity: .4;
}
.page-content section > h1 a,
.page-content section > h2 a,
.page-content section > h3 a,
.page-content section > h4 a,
.page-content section > h5 a,
.page-content section > h6 a {
float: left;
margin-left: -20px;
opacity: 0;
cursor: pointer;
}
.page-content section > h1 a:hover,
.page-content section > h2 a:hover,
.page-content section > h3 a:hover,
.page-content section > h4 a:hover,
.page-content section > h5 a:hover,
.page-content section > h6 a:hover {
opacity: .4;
}
.page-content section > h1 {
font-size: 34px;
}
.page-content section > h2 {
font-size: 28px;
}
.page-content section > h3 {
font-size: 22px;
}
.page-content section > h4 {
font-size: 18px;
}
.page-content section > h5 {
font-size: 16px;
}
.page-content section > h6 {
font-size: 14px;
color: #666;
}
.page-content section > p {
font-size: 14px;
line-height: 20px;
color: #666;
margin: 14px 0;
}
.page-content section > p a {
color: #38f;
}
.page-content section > ul li,
.page-content section > ol li {
color: #666;
font-size: 14px;
line-height: 20px;
margin: 10px 0 10px 20px;
padding-left: 20px;
position: relative;
}
.page-content section > ul li a,
.page-content section > ol li a {
color: #38f;
}
.page-content section > ul li::before,
.page-content section > ol li::before {
content: '';
position: absolute;
width: 8px;
height: 8px;
box-sizing: border-box;
border: 2px solid #999;
border-radius: 50%;
top: 6px;
left: 0;
}
.page-content section > ul li li,
.page-content section > ol li li {
margin-left: 0;
}
.page-content p > code,
.page-content .table code,
.page-content li > code {
background-color: #F2F2F2;
display: inline-block;
border: 1px solid #E5E5E5;
border-radius: 3px;
padding: 1px 3px;
color: #333;
margin: 0 2px;
}
.table {
border-collapse: collapse;
width: 100%;
background-color: #fff;
color: #333;
font-size: 14px;
margin-bottom: 45px;
}
.table th {
text-align: left;
border: 1px solid #E5E5E5;
background-color: #F2F2F2;
padding: 10px;
}
.table th:first-child {
padding-left: 10px;
}
.table td {
border: 1px solid #E5E5E5;
padding: 10px;
}
.l {
float: left;
}
.r {
float: right;
}
.gray {
color: #999;
}
.placeholder {
font-size: 14px;
color: #cccccc;
}
.vui-intro {
text-align: center;
}
.vui-intro__logo img {
margin: 0 auto;
}
.vui-intro__title {
font-size: 45px;
line-height: 60px;
font-weight: 400;
font-family: monospace;
}
.vui-intro__subtitle {
font-size: 15px;
color: #455a64;
}