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. 05.ElementUI源码学习:项目发布配置(github pages&npm package)

    0x00.前言 书接上文.项目第一个组件已经封装好,说明文档也已编写好.下面需要将说明文档发布到外网上,以此来展示和推广项目,使用 Github Pages功能实现.同时将组件发布之 npm 上,方便 ...

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

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

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

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

  4. 02.ElementUI源码学习:babel配置

    书接上文,接下来项目将引入babel支持ES6+语法兼容. Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行 ...

  5. element-ui 源码学习

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

  6. 03.ElementUI源码学习:代码风格检查和格式化配置(ESlint & Prettier)

    书接上文.在团队协作中,为避免低级Bug.以及团队协作时不同代码风格对彼此造成的困扰与影响,会预先制定编码规范.使用 Lint工具和代码风格检测工具,则可以辅助编码规范执行,格式化代码,使样式与规则保 ...

  7. 07.ElementUI 2.X 源码学习:源码剖析之工程化(二)

    0x.00 前言 项目工程化系列文章链接如下,推荐按照顺序阅读文章 . 1️⃣ 源码剖析之工程化(一):项目概览.package.json.npm script 2️⃣ 源码剖析之工程化(二):项目构 ...

  8. 06.ElementUI 2.X 源码学习:源码剖析之工程化(一)

    0x.00 前言 在用了5章篇幅 ElementUI源码学习:从零开始搭建Vue组件库汇总 讲解了如何编写一个组件.发布npm以及生成展示文档之后.接下来将分析Element项目的代码结构,学习其工程 ...

  9. 08.ElementUI 2.X 源码学习:源码剖析之工程化(三)

    0x.00 前言 项目工程化系列文章链接如下,推荐按照顺序阅读文章 . 1️⃣ 源码剖析之工程化(一):项目概览.package.json.npm script 2️⃣ 源码剖析之工程化(二):项目构 ...

随机推荐

  1. 内核栈与thread_info结构详解

    本文转载自内核栈与thread_info结构详解 什么是进程的内核栈? 在内核态(比如应用进程执行系统调用)时,进程运行需要自己的堆栈信息(不是原用户空间中的栈),而是使用内核空间中的栈,这个栈就是进 ...

  2. nginx反向代理理解

    实际开发中,会有不同的环境: - 开发环境:自己的电脑- 测试环境:提供给测试人员使用的环境- 预发布环境:数据是和生成环境的数据一致,运行最新的项目代码进去测试- 生产环境:项目最终发布上线的环境 ...

  3. 前端与后端之间参数的传递与接收和@RequestBody,@Requestparam,@Param三个注解的使用

    参数在前台通过对象的形式传递到后台,在后台,可以用@RequestBody注解通过Map或JSONObject接收(太麻烦,既要从Map中取值,取完值后又要封装到Map),也可以用@RequestPa ...

  4. ADT基础(一)—— List,Stack,and Queue

    ADT基础(一)-- List,Stack,and Queue 1 List 表示 数组:易于search,难于insert和remove 链表:难于search,易于insert和remove // ...

  5. 后端程序员之路 33、Index搜索引擎实现分析2-对外接口和大体流程

    # index_manager的单例是index server对外的唯一接口,part_indexer是index搜索的核心部分,index_manager持有了一组part_indexer. typ ...

  6. 使paramiko库执行命令时,在给定的时间强制退出

    原因: 使用paramiko库ssh连接到远端云主机上时,非常偶现卡死现象,连接无法退出(可以是执行命令时云主机重启等造成).需要给定一段时间,不管命令执行是否卡住,都退出连接,显示命令执行超时错误. ...

  7. nessus 故障处理

    0x00 问题描述 打开Nessues Web Client时,界面循环在Initializing Please wait while Nessus prepares files needed...和 ...

  8. Apache配置 6. 访问日记切割

    日志一直记录总有一天会把整个磁盘占满,所以有必要让它自动切割,并删除老的日志文件 (1)配置 (1)配置 # vim /usr/local/apache2 .4/conf/extra/httpd-vh ...

  9. C#开发BIMFACE系列35 服务端API之模型对比6:获取模型构建对比分类树

    系列目录     [已更新最新开发文章,点击查看详细] BIMFACE平台提供了服务端"获取模型对比构件分类树"API.目录树返回结果以树状层级关系显示了增删改的构件信息,里面无法 ...

  10. 2018.8.30 nowcoder oi赛制测试1

    2018.8.30 nowcoder oi赛制测试1 普及组难度,发现了一些问题 A 题目大意:求斐波那契数列\(f(k-1)f(k+1)-f(k)^2\),范围极大 打表可得规律 其实是卡西尼恒等式 ...