04.ElementUI源码学习:组件封装、说明文档的编写发布
0x00.前言
书接上文。项目经过一系列的配置,开发脚手架已经搭建完毕。接下来开始封装自定义组件、并基于 markdown
文件生成文档和演示案例。
后续文章代码会根据篇幅,不影响理解的情况下进行部分删减,详细代码可在 Github Repo
查看。
0x01.封装第一个组件
封装组件
接下来封装一个loading组件。
创建 packages/loading/src/main.vue
文件(篇幅问题,样式代码详见Github)。
创建 packages/loading/index.js
文件。使用 install
方法来全局注册该组件,安装组件通过全局方法 Vue.use()
即可。官网-Vue插件
创建 src/index.js
文件,该文件的作用:
- 导入组件库所有组件
- 定义组件库组件注册安装的install 方法
- 整体导出版本、install、各个组件等。
引用组件
在 examples/main.js
文件中引用组件库
在 examples/App.vue
中添加组件引用
页面效果如下
0x02.编写组件说明文档
接下来基于 markdown
编写组件文档,能让示例代码像组件一样在页面中渲染。
md-loader
markdown
文件的解析基于markdown-it
及其社区插件。
markdown-it
主要的解析器/渲染器。官方文档markdown-it-anchor
生成标题锚点。官方文档markdown-it-container
创建块级自定义容器的解析插件。官方文档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.示例代码
0x04.参考
Element 文档中的 Markdown 解析
element的demo-block
highlight 97种主题样式列表
04.ElementUI源码学习:组件封装、说明文档的编写发布的更多相关文章
- 05.ElementUI源码学习:项目发布配置(github pages&npm package)
0x00.前言 书接上文.项目第一个组件已经封装好,说明文档也已编写好.下面需要将说明文档发布到外网上,以此来展示和推广项目,使用 Github Pages功能实现.同时将组件发布之 npm 上,方便 ...
- 修改elementUI源码新增组件/修改组件
前言 经常我们会遇到elementUI组件库期间有5%达不到我们想要的需求,第一我们重新写组件,第二我们改源码 安装element https://github.com/ElemeFE/element ...
- element-ui源码之组件通信那些事
最近在用element-ui重构前端项目,无意之中翻阅到一个比较好用的组件间通信方式,借助于vue的封装的发布-订阅消息模式与mixin语法.在开始之前先总结下vue常用的组件间通信方式,具体如下: ...
- 02.ElementUI源码学习:babel配置
书接上文,接下来项目将引入babel支持ES6+语法兼容. Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行 ...
- element-ui 源码学习
https://athena0304.github.io/element-analysis/ 1.模板字符串实现字符串拼接 typeClass() { return `el-alert--${ thi ...
- 03.ElementUI源码学习:代码风格检查和格式化配置(ESlint & Prettier)
书接上文.在团队协作中,为避免低级Bug.以及团队协作时不同代码风格对彼此造成的困扰与影响,会预先制定编码规范.使用 Lint工具和代码风格检测工具,则可以辅助编码规范执行,格式化代码,使样式与规则保 ...
- 07.ElementUI 2.X 源码学习:源码剖析之工程化(二)
0x.00 前言 项目工程化系列文章链接如下,推荐按照顺序阅读文章 . 1️⃣ 源码剖析之工程化(一):项目概览.package.json.npm script 2️⃣ 源码剖析之工程化(二):项目构 ...
- 06.ElementUI 2.X 源码学习:源码剖析之工程化(一)
0x.00 前言 在用了5章篇幅 ElementUI源码学习:从零开始搭建Vue组件库汇总 讲解了如何编写一个组件.发布npm以及生成展示文档之后.接下来将分析Element项目的代码结构,学习其工程 ...
- 08.ElementUI 2.X 源码学习:源码剖析之工程化(三)
0x.00 前言 项目工程化系列文章链接如下,推荐按照顺序阅读文章 . 1️⃣ 源码剖析之工程化(一):项目概览.package.json.npm script 2️⃣ 源码剖析之工程化(二):项目构 ...
随机推荐
- DOS打开方式
一.CMD窗口 Ⅰ.普通身份 按下键盘组合键:Windows + R --> 出现'运行'窗口,在'打开'的输入框中输入'cmd' --> 点击确定 打开'开始'菜单 --> 找到' ...
- 将VMware虚拟机最小化到托盘栏
版权:本文采用「署名-非商业性使用-相同方式共享 4.0 国际」知识共享许可协议进行许可. 目录 前言 将VMware最小化到托盘栏的方法 1.下载 Trayconizer 2.解压 trayco ...
- DRF简介/接口概念
目录 一.drf框架简介 1. drf安装 2. drf的优势 二.接口 1. 接口的概念 2. 接口文档 3. 接口规范(restful) 3.1 url链接规范 3.2 请求方式规范 3.3 响应 ...
- SpringBoot(十):SpringBoot的简单事务管理
SpringBoot集成Mybatis之后,进行事务管理.SpringBoot使用事务非常简单,底层依然采用的是Spring本身提供的事务. 1.在入口类中使用注解@EnableTransaction ...
- CSharp使用ANTLR4生成简单计算Parser
ANTLR简介 ANTLR (ANother Tool for Language Recognition) is a powerful parser generator for reading, pr ...
- 别再恐惧 IP 协议(万字长文 | 多图预警)
尽人事,听天命.博主东南大学硕士在读,热爱健身和篮球,乐于分享技术相关的所见所得,关注公众号 @ 飞天小牛肉,第一时间获取文章更新,成长的路上我们一起进步 本文已收录于 「CS-Wiki」Gitee ...
- go mod管理 init 和 包导入的关系
你创建了一个文件的名字为:lisi001 如果你初始化项目名字为lisi, go mod init lisi 那么你导包的时候就得也用lisi import ( "lisi/path&quo ...
- 《C++ Primer》笔记 第7章 类
成员函数的声明必须在类的内部,它的定义则既可以在类的内部也可以在类的外部.作为接口组成部分的非成员函数,它们的定义和声明都在类的外部. 定义在类内部的函数是隐式的inline函数. 成员函数通过一个名 ...
- 如何获取下载 FreeBSD
『如何获取下载 FreeBSD 』 『如何获取下载 FreeBSD 』 FreeBSD 是免费获取的. [下载地址] O网页链接 版本选择,尽量选择较新版本,桌面用户可选择 current 版本.st ...
- Django之cookie 与session组件
一.会话跟踪技术 1.1 什么是会话跟踪 我们需要先了解一下什么是会话!可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应.例如你给10086打个电话,你就是客户端,而 ...