摘要：實現(xiàn)使用編寫的個人組件庫說明文檔前一篇文章實現(xiàn)了按需加載封裝個人的組件庫功能，有了組件庫，當然還要有配套說明文檔，這樣使者用起來才更方便。特別說明本文中有部分實現(xiàn)是了的代碼實現(xiàn)的。
實現(xiàn)使用markdown編寫的個人組件庫說明文檔
前一篇文章實現(xiàn)了按需加載封裝個人的組件庫功能，有了組件庫，當然還要有配套說明文檔，這樣使者用起來才更方便。打包完成的dist目錄是最終可放到服務器中，直接訪問到文檔的喲。
項目github地址：https://github.com/yuanalina/installAsRequired
在項目中配置打包examples
上篇文章中，執(zhí)行打包命令會將項目打包至lib下，打包完成的目錄結構是適合直接發(fā)布為npm包，使用時使用import等引入的。其中并沒有html文件入口，所以要有說明文檔，直接在瀏覽器中可訪問，還需要重新配置打包。
打包examples相關目錄結構及webpack配置
一、package.json增加打包命令"build_example": "node build/build.js examples"
二、在src同級增加examples目錄，存放文檔相關文件
examples目錄中：1、assets目錄存放靜態(tài)資源依賴，2、components存放vue組件，3、docs目錄存放.md文件，說明文檔，4、main.js會作為打包的入口，在這里引入項目的組件、第三方依賴：element-ui、路由配置等，5、route.js路由配置，6、index.html作為打包的html模版，7、App.vue
三、webpack相關配置
在build目錄中增加webpack.prod.examples.conf.js文件，配置打包example。這個文件是vue-cli生成項目中的webpack.prod.conf.js稍作修改，改動部分：
1、增加output出口配置，由于之前在config中將這個值設置成了../lib，這里把值設置為../dist，將examples打包后輸出到dist
2、設置打包入口為examples下的main.js
3、設置html模版為./examples/index.html
另外在build/build.js中，需要判斷example參數(shù)，更改一下output出口路徑，如圖：
技術實現(xiàn)
編寫說明文檔，最直觀的還是使用markdown編寫，看了elementUI的實現(xiàn)方案，決定按elementUI的技術方案去實現(xiàn)。特別說明：本文中有部分實現(xiàn)是copy了elementUI的代碼實現(xiàn)的。后面會特別指出
相關依賴安裝
npm i highlight -D //安裝語法高亮
npm i markdown-it markdown-it-anchor markdown-it-container -D // 安裝markdown相關依賴
npm i vue-markdown-loader -D //安裝vue-markdown-loader，解析.md文件為.vue文件
webpack相關配置
安裝了vue-markdown-loader解析.md文件，在webpack.base.conf.js文件中，需要進行相關的loader配置，這里的配置相關，都是copy的element-ui中的代碼。改動部分如下：
一、首先增加strip-tags文件到/build目錄中，strip-tags內(nèi)容如下：
/*!
* strip-tags
*
* Copyright (c) 2015 Jon Schlinkert, contributors.
* Licensed under the MIT license.
*/
"use strict";
var cheerio = require("cheerio");
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();
};
exports.fetch = function(str, tag) {
var $ = cheerio.load(str, {decodeEntities: false});
if (!tag) return str;
return $(tag).html();
};
二、webpack.base.conf.js的改動
1、增加引入strip-tags和markdown-it
const striptags = require("./strip-tags")
const md = require("markdown-it")()
2、增加工具函數(shù)
const wrap = function(render) {
return function() {
return render.apply(this, arguments)
.replace("", "")
}
}
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
}
3、增加.md相關loader配置,將.md文件解析為.vue文件，同時，解析處理::: demo :::代碼塊等，解析處理::: demo :::代碼塊為demo-block vue組件，并傳入對應參數(shù).
{
test: /.md$/,
loader: "vue-markdown-loader",
options: {
use: [
[require("markdown-it-container"), "demo", {
validate: function(params) {
return params.trim().match(/^demos*(.*)$/)
},
render: function(tokens, idx) {
var m = tokens[idx].info.trim().match(/^demos*(.*)$/)
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 `
${html}
${descriptionHTML}
`
}
return "
"
}
}],
[require("markdown-it-container"), "tip"],
[require("markdown-it-container"), "warning"]
],
preprocess: function(MarkdownIt, source) {
MarkdownIt.renderer.rules.table_open = function() {
return "";
};
MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence)
return source;
}
}
}
文檔編寫部分
配置相關的就告一段落了，接下來進入examples中的文檔編寫部分
一、main.js入口文件編寫
在入口文件中，引入相關依賴，項目樣式入口、路由、組件以及element-ui
import Vue from "vue"
import App from "./App.vue"
import VueRouter from "vue-router"
// 引入組件
import JY from "../src"
Vue.use(JY)
// 引入element-ui
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI)
// 引入demo-block
import DemoBlock from "./components/demoBlock"
Vue.component("demo-block", DemoBlock)
// 引入項目樣式入口
import "./assets/less/index.less"
// 引入路由
import routes from "./route"
Vue.use(VueRouter)
const router = new VueRouter({
routes
})
/* eslint-disable no-new */
new Vue({
render(createElement) {
return createElement(App)
},
router
}).$mount("#app")
二、設置路由配置route.js
路由配置時，將路由路徑對應的組件設置為引入的.md文件
import Install from "./docs/install.md"
import QuikeStart from "./docs/quikeStart.md"
import Input from "./docs/input.md"
const routes = [
{
path: "/",
component: Install,
name: "default"
},
{
path: "/guide/install",
name: "Install",
component: Install
},
{
path: "/guide/quikeStart",
name: "quikeStart",
component: QuikeStart
},
{
path: "/input",
name: "input",
component: Input
}
]
export default routes
三、App.vue、以及相關布局組件
1、App.vue
2、header.vue
3、menu.vue
四、重要組件demoBlock.vue
demoBlock組件是解析.md中的::: demo ::: 代碼塊需要用到的組件，這里的demoBlock.vue文件是copy的element-ui的代碼后稍作修改
五、docs中的.md文檔文件
.md文件編寫時有幾個需要注意的地方：
具有交互功能的說明文檔，需要有標簽，在標簽元素中定義需要導出的vue實例。
在:::demo ::: 代碼塊中定義的模版會作為導出的vue實例的模版，但是在代碼塊中的中的內(nèi)容僅作為展示。
.md文件粘貼進來會展示有誤，這里只進行了截圖，有需要的伙伴可以進入github查看
六、樣式調(diào)整
樣式相關的調(diào)整代碼這里就不多帶帶列出來說明了，需要的伙伴可以進入github查看
開發(fā)中的調(diào)試
設置webpack.dev.conf.js文件的入口為./examples/main.js，這樣即可以邊開發(fā)組件邊調(diào)試，同時也可以調(diào)試到說明文檔。
entry: {
app: "./examples/main.js"
},
本文結束啦～希望對你有所幫助。。學無止境，與諸君共勉～～
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97635.html
-
摘要：測試復制至剪切板的文本測試相關文檔復制剪切板滾動至視圖內(nèi)其實，這是一個非常方便的功能，比如說，分頁加載后滾動至頭部，切換頁面時切換至頭部。HeyUI組件庫
如果你還不了解heyui組件庫，歡迎來我們的官網(wǎng)或者github參觀。
官網(wǎng)
github
當然，如果能給我們一顆???，那是最贊的了！
按需加載
當heyui組件庫的組件越來越多的時候，按需加載的功能終于上線了。
話不多說，先把按需...
IamDLY
評論0
收藏0
-
摘要：難道是因為這個組件自帶標簽胡亂猜疑是解決不了問題的。為何稱之為勉強版，因為從上面的也看出來了。再看數(shù)組第二個值，這便是一個完整的示例了。也希望能更加努力的學習和進步，更深的理解前端這門藝術
項目使用ElementUI，挺好用的，頁面中有些地方的幫助提示通過使用組件Tooltip和el-icon-question來展示，代碼如下：
本月累計收益
截圖如下：
sho...
-
摘要：不顯示下載不顯示靜音不顯示音量條不顯示進度條只能播放一個不要快進按鈕例如父組件這樣回雪月花青春一點點語法大多數(shù)時候，我們希望頁面上播放一個音頻時，其他音頻可以暫停。可以把一個類數(shù)組轉化成數(shù)組，這個是我常用的。
showImg(https://segmentfault.com/img/remote/1460000016177005?w=619&h=343);
目的
本項目的目的是教你如...
-
摘要：下面一步步拆解上述流程。切換至分支檢測本地和暫存區(qū)是否還有未提交的文件檢測本地分支是否有誤檢測本地分支是否落后遠程分支發(fā)布發(fā)布檢測到在分支上沒有沖突后，立即執(zhí)行。
背景
最近一直在著手做一個與業(yè)務強相關的組件庫，一直在思考要從哪里下手，怎么來設計這個組件庫，因為業(yè)務上一直在使用ElementUI（以下簡稱Element），于是想?yún)⒖剂艘幌翬lement組件庫的設計，看看Element構...
男|高級講師
-
閱讀 466·2021-10-09 09:57
-
閱讀 470·2019-08-29 18:39
-
閱讀 811·2019-08-29 12:27
-
閱讀 3028·2019-08-26 11:38
-
閱讀 2667·2019-08-26 11:37
-
閱讀 1285·2019-08-26 10:59
-
閱讀 1376·2019-08-26 10:58
-
閱讀 989·2019-08-26 10:48
