0x00.前言

书接上文。项目经过一系列的配置,开发脚手架已经搭建完毕。接下来开始封装自定义组件、并基于 markdown 文件生成文档和演示案例。

后续文章代码会根据篇幅,不影响理解的情况下进行部分删减,详细代码可在 Github Repo 查看。

0x01.封装第一个组件

封装组件

接下来封装一个loading组件。

创建 packages/loading/src/main.vue 文件(篇幅问题,样式代码详见Github)。

创建 packages/loading/index.js 文件。使用 install 方法来全局注册该组件,安装组件通过全局方法 Vue.use() 即可。官网-Vue插件

创建 src/index.js 文件,该文件的作用:

  1. 导入组件库所有组件
  2. 定义组件库组件注册安装的install 方法
  3. 整体导出版本、install、各个组件等。

引用组件

examples/main.js 文件中引用组件库

examples/App.vue 中添加组件引用

页面效果如下

0x02.编写组件说明文档

接下来基于 markdown 编写组件文档,能让示例代码像组件一样在页面中渲染。

md-loader

markdown 文件的解析基于markdown-it 及其社区插件。

  1. markdown-it 主要的解析器/渲染器。官方文档
  2. markdown-it-anchor 生成标题锚点。官方文档
  3. markdown-it-container 创建块级自定义容器的解析插件。官方文档
  4. markdown-it-chain 支持链式调用 markdown-it 。官方文档
npm i  -D  markdown-it markdown-it-anchor markdown-it-container markdown-it-chain

其他核心插件

npm i -D transliteration // 汉字转拼音

自定义loader

项目将使用element的自定义loader,在源码目录 build\md-loader 创建文件,目录结构如下。

├─md-loader
| ├─config.js
| ├─containers.js
| ├─fence.js
| ├─index.js
| └─util.js

index.js文件是loader的入口文件,通过提取template 与 script 的内容,把 Markdown 转化成 Vue 组件。

config.js文件使用 markdown-it-chain 配置markdown-it选项、插件和容器信息,初始化markdown-it实例。

containers.js文件使用 markdown-it-container 来转换自定义容器,将自定义容器 :::demo转换成 demo-block 组件。

fence.js文件中重写了代码块(fence)默认渲染规则。

util.js文件提供 stripScript stripStyle stripTemplate genInlineComponentText等方法用于页面内容提取和生成组件。

webpack 配置

创建build/config.js文件设置 webpack 公共配置信息。

更新 build\webpack.config.js文件,添加自定义 md-loder ,实现 markdown 文件的解析。

编写文档

编写组件说明文档examples\docs\loading.md

安装 vue-router 插件。

npm i -D vue-router

新增 examples/router.js 文件配置路由信息。

import Vue from 'vue';
import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [
{
path: '/',
name: 'index',
//使用vue的异步组件技术 , 可以实现按需加载 .
component: (resolve) => require(['./components/HelloWorld.vue'], resolve),
},
]; routes.push({
path: '/test',
name: 'test',
component: (resolve) => require(['./docs/loading.md'], resolve),
}); routes.push({
path: '/jsx',
name: 'jsx',
component: (resolve) => require(['./components/JSX.vue'], resolve),
}); export default new VueRouter({
mode: 'hash',
base: process.env.NODE_ENV !== 'production' ? '/' : '/me-ui',
routes,
});

调整 examples 目录下文档结构如下,详见源码。

├─examples
| ├─App.vue
| ├─main.js
| ├─router.js
| ├─docs
| | └loading.md
| ├─components
| | ├─HelloWorld.vue
| | └JSX.vue
| ├─assets
| | └logo.png

examples\main.js 引入路由,examples\App.vue 更新路由导航信息。

// main.js
...
...
import router from './router';
...
new Vue({
router,
render: (h) => h(App),
}).$mount('#app'); // App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> | <router-link to="/jsx">JSX</router-link> |
<router-link to="/test">loading组件</router-link>
</div>
<router-view />
</div>
</template>

页面效果如下

demo-block 组件

上面的说明文档功能十分简陋,接下来编写 demo-block 组件,支持示例组件渲染、高亮代码等功能。

安装语法高亮插件 highlight.js

npm i -D highlight.js    // 代码高亮

创建 examples\components\demo-block.vue 组件

examples\main.js 引入 highlight 插件、 demo-block 组件,配置语法高亮主题样式。增加 afterEach 全局后置钩子,高亮页面代码块。

组件说明文档 examples\docs\loading.md 更新成约定的文档格式。

运行程序,页面示例代码块渲染组件,可以展开收起源代码,语法高亮显示,效果如下:

0x03.示例代码

Github Repo

0x04.参考

Element 文档中的 Markdown 解析

element的demo-block

highlight 97种主题样式列表

04.ElementUI源码学习:组件封装、说明文档的编写发布的更多相关文章

  1. 修改elementUI源码新增组件/修改组件

    前言 经常我们会遇到elementUI组件库期间有5%达不到我们想要的需求,第一我们重新写组件,第二我们改源码 安装element https://github.com/ElemeFE/element ...

  2. element-ui源码之组件通信那些事

    最近在用element-ui重构前端项目,无意之中翻阅到一个比较好用的组件间通信方式,借助于vue的封装的发布-订阅消息模式与mixin语法.在开始之前先总结下vue常用的组件间通信方式,具体如下: ...

  3. element-ui 源码学习

    https://athena0304.github.io/element-analysis/ 1.模板字符串实现字符串拼接 typeClass() { return `el-alert--${ thi ...

  4. 【iScroll源码学习04】分离IScroll核心

    前言 最近几天我们前前后后基本将iScroll源码学的七七八八了,文章中未涉及的各位就要自己去看了 1. [iScroll源码学习03]iScroll事件机制与滚动条的实现 2. [iScroll源码 ...

  5. MVC系列——MVC源码学习:打造自己的MVC框架(四:了解神奇的视图引擎)

    前言:通过之前的三篇介绍,我们基本上完成了从请求发出到路由匹配.再到控制器的激活,再到Action的执行这些个过程.今天还是趁热打铁,将我们的View也来完善下,也让整个系列相对完整,博主不希望烂尾. ...

  6. MVC系列——MVC源码学习:打造自己的MVC框架(三:自定义路由规则)

    前言:上篇介绍了下自己的MVC框架前两个版本,经过两天的整理,版本三基本已经完成,今天还是发出来供大家参考和学习.虽然微软的Routing功能已经非常强大,完全没有必要再“重复造轮子”了,但博主还是觉 ...

  7. MVC系列——MVC源码学习:打造自己的MVC框架(二:附源码)

    前言:上篇介绍了下 MVC5 的核心原理,整篇文章比较偏理论,所以相对比较枯燥.今天就来根据上篇的理论一步一步进行实践,通过自己写的一个简易MVC框架逐步理解,相信通过这一篇的实践,你会对MVC有一个 ...

  8. MVC系列——MVC源码学习:打造自己的MVC框架(一:核心原理)

    前言:最近一段时间在学习MVC源码,说实话,研读源码真是一个痛苦的过程,好多晦涩的语法搞得人晕晕乎乎.这两天算是理解了一小部分,这里先记录下来,也给需要的园友一个参考,奈何博主技术有限,如有理解不妥之 ...

  9. Vue2.1.7源码学习

    原本文章的名字叫做<源码解析>,不过后来想想,还是用“源码学习”来的合适一点,在没有彻底掌握源码中的每一个字母之前,“解析”就有点标题党了.建议在看这篇文章之前,最好打开2.1.7的源码对 ...

  10. spring源码学习——spring整体架构和设计理念

    Spring是在Rod Johnson的<Expert One-On-One J2EE Development and Design >的基础上衍生而来的.主要目的是通过使用基本的java ...

随机推荐

  1. C语言 百炼成钢9

    //题目25:求1+2!+3!+...+20!的和 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib ...

  2. 通过属性集名称获取属性集id

    Mage::getModel('eav/entity_attribute_set')->load('属性集名称', 'attribute_set_name')->getAttributeS ...

  3. css中使用变量

    2017年3月,微软宣布 Edge 浏览器将支持 CSS 变量.这个重要的 CSS 新功能,所有主要浏览器已经都支持了. 声明css变量的时候,变量名前面要加两根连词线(--).变量名大小写敏感,-- ...

  4. java_web学习(七) MySQL的配置与安装

    一:下载MySQL 1.进入oracle官网 2. 3. 4. 5. 6. 7. 网址:https://dev.mysql.com/downloads/file/?id=469273 二:配置MySQ ...

  5. 一起学HBase——总结HBase中的PUT、GET、DELETE操作

    传统的关系型数据库有CRUD增删改查操作,同样对于NoSQL列式数据库也有CRUD操作.本文对HBase中常用的Scan.GET.PUT.DELETE操作的用法做个总结. Put操作 Put相当于传统 ...

  6. Error: The INF file contains Unicode characters that could not be converted correctly

    昨天第一次为自己的windows mobile程序制作CAB安装包,但是在生成过程中,却出现了这样一个问题: 编译完成 -- 0 个错误,0 个警告time -> G:\WindowsMobil ...

  7. Hudson 打包部署到Was上特别慢

    一.找问题点 1.打包很快,到部署很慢 2.部署到其他was一样很慢 二.解决 经过寻找,网上找出以下一段话: 问题出在web.xml,web.xml中的版本信息不对,要根据你的servlet版本和运 ...

  8. Jenkins安装部署(一)

    环境准备 CentOS Linux release 7.4 1.IP:192.168.43.129 2.路径:/mnt 3.jdk版本:jdk1.8.0 4.tomcat版本:tomcat-8.5 5 ...

  9. mysql只修改年月日,时分秒不变

    比如时间为 “2014-12-11 13:12:01”修改为“2014-09-26 13:12::01”修改内容为修改yyyy-mm-dd为对应的日期,时间不变.UPDATE result_road_ ...

  10. -27979 LoadRunner 错误27979 找不到请求表单 Action.c(73): Error -27979: Requested form not found

    LoadRunner请求无法找到:在录制Web协议脚本回放脚本的过程中,会出现请求无法找到的现象,而导致脚本运行停止. 错误现象:Action.c(41): Error -27979: Request ...