Elementソースシリーズ——VueロードMarkdown形式コンポーネント前編
20018 ワード
Elementソースシリーズ——VueロードMarkdown形式コンポーネント前編 Elementソースシリーズ——VueロードMarkdownフォーマットコンポーネント前編 序言 vue-cli をインストールインストール依存 Webpackプロファイル の作成作成コンポーネント まとめ
序文
ドキュメントがどのように動作するか-vue-markdown-loader
当初、Mint UIを書くときにVueでドキュメントを書くという問題に遭遇しました.Markdownを書くときにもVueコンポーネントを書くことができるDemoをどうすればいいのか.その後、Mint UIのドキュメントにDemoは書かれていませんでしたが.最初はElementの内部バージョンで、様々なVueのMarkdown関連プラグインを探しました.templateでMarkdownフォーマットを定義するか、Markdownのコンポーネントがあります.Markdownファイルを純粋に書くことができず、Demoも書くことができます.
後でMarkdownファイルをVueコンポーネントに変換してみることもできるかもしれないと思います.結局MarkdownにHTMLを書くことができて、それでは完全にVueのテンプレートとすることができます.その後、vue-markdown-loaderがあり、MarkdownをVueコンポーネントに変換するwebpack loaderがあり、vue-routerと組み合わせてMarkdownにVueコードを書くことができるドキュメントサイトを構築することができます.
参照先-https://segmentfault.com/a/1190000007026819
書く前に、私たちはまず需要を整理して、需要を理解してこそもっと良いコードを生産することができます!これも本文の中で最も重要な部分である.
私たちの最終的な目的はこのようなチュートリアルサイトを作ることです.http://element.eleme.io/#/zh-CN/component/alert
開発効率を向上させるためには、markdown形式のファイルをimport md from'path/xx.md′のインポート形式は対応するコンポーネントにロードされ、markdownファイルはコンポーネントである.
では、私たちの最初のニーズはimportをブロックし、markdowm構文を解析することです.
ここに来たとき、何の欠点もないようだ.しかし、私たちがしなければならないのはチュートリアルサイトであることを忘れないでください.コードだけではだめです.私たちはまだ効果が必要です.
だから私たちの2番目の需要はmarkdownの中でもVueのコンポーネントを書くことができます!
この問題を解決したら、Webページのテンプレートを設計し、ルートを通じて異なるmdファイルを呼び出すだけで、チュートリアルサイトを簡単に完成することができます.
vue-cliのインストール
便宜上、私たちは自分で環境を構築するのではなく、直接テーマに入ります.
依存関係のインストール
Webpackプロファイルの作成
まず
ツール を き わったら、webpackの を めましょう.
moduleでrulesに しいloaderを し、
コンポーネントの
ルートディレクトリの にinfoを します.mdファイルをテストする
ハロー・ワールドvueにmdファイルを
まとめ
ここまで すると、mdファイルは にページに されます.しかし、mdファイルでVueコンポーネントを び すにはdemo-blockコンポーネントを する があります. の 、demo-blockコンポーネントについては します.
い アーキテクチャは に に くの を できると わざるを ない. の でvue-markdown-loaderの はもちろん で、しかし に なのはアーキテクチャの です!
んでくれてありがとう!elementチームの に します!ここにあるElementソースシリーズ- の
序文
ドキュメントがどのように動作するか-vue-markdown-loader
当初、Mint UIを書くときにVueでドキュメントを書くという問題に遭遇しました.Markdownを書くときにもVueコンポーネントを書くことができるDemoをどうすればいいのか.その後、Mint UIのドキュメントにDemoは書かれていませんでしたが.最初はElementの内部バージョンで、様々なVueのMarkdown関連プラグインを探しました.templateでMarkdownフォーマットを定義するか、Markdownのコンポーネントがあります.Markdownファイルを純粋に書くことができず、Demoも書くことができます.
後でMarkdownファイルをVueコンポーネントに変換してみることもできるかもしれないと思います.結局MarkdownにHTMLを書くことができて、それでは完全にVueのテンプレートとすることができます.その後、vue-markdown-loaderがあり、MarkdownをVueコンポーネントに変換するwebpack loaderがあり、vue-routerと組み合わせてMarkdownにVueコードを書くことができるドキュメントサイトを構築することができます.
参照先-https://segmentfault.com/a/1190000007026819
書く前に、私たちはまず需要を整理して、需要を理解してこそもっと良いコードを生産することができます!これも本文の中で最も重要な部分である.
私たちの最終的な目的はこのようなチュートリアルサイトを作ることです.http://element.eleme.io/#/zh-CN/component/alert
開発効率を向上させるためには、markdown形式のファイルをimport md from'path/xx.md′のインポート形式は対応するコンポーネントにロードされ、markdownファイルはコンポーネントである.
では、私たちの最初のニーズはimportをブロックし、markdowm構文を解析することです.
ここに来たとき、何の欠点もないようだ.しかし、私たちがしなければならないのはチュートリアルサイトであることを忘れないでください.コードだけではだめです.私たちはまだ効果が必要です.
だから私たちの2番目の需要はmarkdownの中でもVueのコンポーネントを書くことができます!
この問題を解決したら、Webページのテンプレートを設計し、ルートを通じて異なるmdファイルを呼び出すだけで、チュートリアルサイトを簡単に完成することができます.
vue-cliのインストール
便宜上、私たちは自分で環境を構築するのではなく、直接テーマに入ります.
vue init webpack markdown
cd markdown
npm install依存関係のインストール
markdown-it markdown
markdown-it-anchor
markdown-it-container
vue-markdown-loader loader
transliteration
cheerio jQuery
highlight.js
striptags cheerio ,strip ，fetch Webpackプロファイルの作成
まず
buildディレクトリの下にstrip-tags.jsファイルを新規作成する.// strip-tags.js
'use strict';
var cheerio = require('cheerio'); // jQuery
/**
* , VUE <style> , ,
* @param {[String]} str e.g'script' ['script','style']
* @param {[Array|String]} tags e.g '<template></template><script> ''
* @return {[String]} e.g ''
*/
exports.strip = function(str, tags) {
var $ = cheerio.load(str, {decodeEntities: false});
if (!tags || tags.length === 0) {
return str;
}
tags = !Array.isArray(tags) ? [tags] : tags;
var len = tags.length;
while (len--) {
$(tags[len]).remove();
}
return $.html(); // cheerio
};
/**
*
* @param {[String]} str e.g 'header'
* @param {[String]} tag e.g 'h1'
* @return {[String]} e.g 'header'
*/
exports.fetch = function(str, tag) {
var $ = cheerio.load(str, {decodeEntities: false});
if (!tag) return str;
return $(tag).html();
};ツール を き わったら、webpackの を めましょう.
webpack.base.conf.jsを きます.// webpack.base.conf.js
const md = require('markdown-it')(); // markdown-it
const slugify = require('transliteration').slugify; // transliteration slugify
const striptags = require('./strip-tags'); //
/**
* cheerio Unicode , convert
* @param {[String]} str e.g
* @return {[String]} e.g
*/
function convert(str) {
str = str.replace(/()(\w{4});/gi, function($0) {
return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16));
});
return str;
}
/**
* v-pre . ,
* hljs highlight.js
* @param {[type]} render e.g '''', '');
};
}moduleでrulesに しいloaderを し、
{
test: /\.md$/,
loader: 'vue-markdown-loader',
options: {
use: [
[require('markdown-it-anchor'), {
level: 2, // , : #
slugify: slugify, // slugify, , id
permalink: true, //
permalinkBefore: true //
}],
// 'markdown-it-container'
[require('markdown-it-container'), 'demo', {
// ::: demo :::
validate: function(params) {
return params.trim().match(/^demo\s*(.*)$/);
},
// ,
render: function(tokens, idx) {
var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
// nesting === 1
if (tokens[idx].nesting === 1) {
// , ::: demo xxx xxx
var description = (m && m.length > 1) ? m[1] : '';
//
var content = tokens[idx + 1].content;
// html
var html = convert(striptags.strip(content, ['script', 'style'])).replace(/(]*)=""(?=.*>)/g, '$1');
// script
var script = striptags.fetch(content, 'script');
// style
var style = striptags.fetch(content, 'style');
// prop ,
var jsfiddle = { html: html, script: script, style: style };
//
var descriptionHTML = description
? md.render(description)
: '';
// jsfiddle ,
jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle));
// , demo-block ,
return `class="demo-box" :jsfiddle="${jsfiddle}">
<div class="source" slot="source">${html}div>
${descriptionHTML}
<div class="highlight" slot="highlight">`;
}
//
return 'div>demo-block>
';
}
}],
[require('markdown-it-container'), 'tip'],
[require('markdown-it-container'), 'warning']
],
//
preprocess: function(MarkdownIt, source) {
// markdown table,
MarkdownIt.renderer.rules.table_open = function() {
return '<table class="table">';
};
// v-pre,
MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
return source;
}
}
}, コンポーネントの
ルートディレクトリの にinfoを します.mdファイルをテストする
//info.md
###
， 。
:::demo Alert ， `type` ， `info`。
```html
<template>
<el-alert
title=" "
type="success">
el-alert>
<el-alert
title=" "
type="info">
el-alert>
<el-alert
title=" "
type="warning">
el-alert>
<el-alert
title=" "
type="error">
el-alert>
template>
```
:::
ハロー・ワールドvueにmdファイルを
// HelloWorld.vue
<template>
<div class="hello">
<info>info>
div>
template>
<script type="text/babel">
import info from '../../info.md'; // md
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
components:{
info //
}
}
script>
<style>
@import 'highlight.js/styles/color-brewer.css'; //
.hello {
margin: 20px auto;
width: 50%;
}
a {
color: #409EFF;
text-decoration: none;
}
code {
background-color: #f9fafc;
padding: 0 4px;
border: 1px solid #eaeefb;
border-radius: 4px;
}
.hljs {
line-height: 1.8;
font-family: Menlo, Monaco, Consolas, Courier, monospace;
font-size: 12px;
padding: 18px 24px;
background-color: #fafafa;
border: solid 1px #eaeefb;
margin-bottom: 25px;
border-radius: 4px;
-webkit-font-smoothing: auto;
}
style>まとめ
ここまで すると、mdファイルは にページに されます.しかし、mdファイルでVueコンポーネントを び すにはdemo-blockコンポーネントを する があります. の 、demo-blockコンポーネントについては します.
い アーキテクチャは に に くの を できると わざるを ない. の でvue-markdown-loaderの はもちろん で、しかし に なのはアーキテクチャの です!
んでくれてありがとう!elementチームの に します!ここにあるElementソースシリーズ- の