编程知识 cdmana.com

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

0x00.前言

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

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

0x01.封装第一个组件

封装组件

接下来封装一个loading组件。

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

carbon (54).png

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

carbon (49).png

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

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

carbon (51).png

引用组件

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

carbon (53).png

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

carbon (52).png

页面效果如下

page.gif

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 组件。

carbon (57).png

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

carbon (58).png

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

carbon (59).png

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

carbon (60).png

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

carbon (61).png

webpack 配置

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

carbon (62).png

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

carbon (63).png

编写文档

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

carbon (56).png

安装 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,
});

carbon (64).png

调整 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>

页面效果如下

Animation12.gif

demo-block 组件

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

安装语法高亮插件 highlight.js

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

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

carbon (19).png

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

carbon (20).png

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

carbon (21).png

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

page1.gif

0x03.示例代码

Github Repo

0x04.参考

Element 文档中的 Markdown 解析
element的demo-block
highlight 97种主题样式列表

版权声明
本文为[anduril]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/anduril/p/14687330.html

Scroll to Top