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

Web 小时候可胖了 23℃ 0评论

0x00.前言

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

1
markdown

文件生成文档和演示案例。

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

1
Github Repo

查看。

0x01.封装第一个组件

封装组件

接下来封装一个loading组件。

创建

1
packages/loading/src/main.vue

文件(篇幅问题,样式代码详见Github)。

carbon (54).png

创建

1
packages/loading/index.js

文件。使用

1
install

方法来全局注册该组件,安装组件通过全局方法

1
Vue.use()

即可。官网-Vue插件

carbon (49).png

创建

1
src/index.js

文件,该文件的作用:

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

carbon (51).png

引用组件

1
examples/main.js

文件中引用组件库

carbon (53).png

1
examples/App.vue

中添加组件引用

carbon (52).png

页面效果如下

page.gif

0x02.编写组件说明文档

接下来基于

1
markdown

编写组件文档,能让示例代码像组件一样在页面中渲染。

md-loader

1
markdown

文件的解析基于

1
markdown-it

及其社区插件。

  1. 1
    markdown-it

    主要的解析器/渲染器。官方文档

  2. 1
    markdown-it-anchor

    生成标题锚点。官方文档

  3. 1
    markdown-it-container

    创建块级自定义容器的解析插件。官方文档

  4. 1
    markdown-it-chain

    支持链式调用 markdown-it 。官方文档


1
npm i  -D  markdown-it markdown-it-anchor markdown-it-container markdown-it-chain

其他核心插件


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

自定义loader
项目将使用element的自定义loader,在源码目录

1
buildmd-loader

创建文件,目录结构如下。


1
2
3
4
5
6
├─md-loader
|     ├─config.js
|     ├─containers.js
|     ├─fence.js
|     ├─index.js
|     └─util.js

1
index.js

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

carbon (57).png

1
config.js

文件使用

1
markdown-it-chain

配置

1
markdown-it

选项、插件和容器信息,初始化

1
markdown-it

实例。

carbon (58).png

1
containers.js

文件使用

1
markdown-it-container

来转换自定义容器,将自定义容器

1
:::demo

转换成

1
demo-block

组件。

carbon (59).png

1
fence.js

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

carbon (60).png

1
util.js

文件提供

1
stripScript
1
stripStyle
1
stripTemplate
1
genInlineComponentText

等方法用于页面内容提取和生成组件。

carbon (61).png

webpack 配置

创建

1
build/config.js

文件设置

1
webpack

公共配置信息。

carbon (62).png

更新

1
buildwebpack.config.js

文件,添加自定义

1
md-loder

,实现

1
markdown

文件的解析。

carbon (63).png

编写文档

编写组件说明文档

1
examplesdocsloading.md

carbon (56).png

安装

1
vue-router

插件。


1
npm i -D vue-router

新增

1
examples/router.js

文件配置路由信息。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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

调整

1
examples

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


1
2
3
4
5
6
7
8
9
10
11
├─examples
|    ├─App.vue
|    ├─main.js
|    ├─router.js
|    ├─docs
|    |  └loading.md
|    ├─components
|    |     ├─HelloWorld.vue
|    |     └JSX.vue
|    ├─assets
|    |   └logo.png

1
examplesmain.js

引入路由,

1
examplesApp.vue

更新路由导航信息。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 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 组件

上面的说明文档功能十分简陋,接下来编写

1
demo-block

组件,支持示例组件渲染、高亮代码等功能。

安装语法高亮插件

1
highlight.js


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

创建

1
examplescomponentsdemo-block.vue

组件

carbon (19).png

1
examplesmain.js

引入

1
highlight

插件、

1
demo-block

组件,配置语法高亮主题样式。增加

1
afterEach

全局后置钩子,高亮页面代码块。

carbon (20).png

组件说明文档

1
examplesdocsloading.md

更新成约定的文档格式。

carbon (21).png

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

page1.gif

0x03.示例代码

Github Repo

0x04.参考

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

转载请注明:九层楼 » 04.ElementUI源码学习:组件封装、说明文档的编写发布

喜欢 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址