编程知识 cdmana.com

04. Elementui source code learning: component encapsulation, document writing and publishing

0x00. Preface

The book follows . The project goes through a series of configurations , The development scaffolding has been set up . Next, start wrapping custom components 、 And based on markdown File generation documents and demonstration cases .

The code of the following articles will be based on the length , Partial deletion without affecting understanding , Detailed code can be found in Github Repo see .

0x01. Encapsulating the first component

Package components

Next, encapsulate a loading Components .

establish packages/loading/src/main.vue file ( The space problem , The style code is shown in Github).

carbon (54).png

establish packages/loading/index.js file . Use install Method to register the component globally , Install components through global methods Vue.use() that will do . Official website -Vue plug-in unit

carbon (49).png

establish src/index.js file , The purpose of the document :

  1. Import all components of the component library
  2. Define component library component registration installation install Method
  3. Overall export version 、install、 Components, etc .

carbon (51).png

Refer to the component

stay examples/main.js The component library is referenced in the file

carbon (53).png

stay examples/App.vue Add component references to

carbon (52).png

The page effect is as follows

page.gif

0x02. Write component documentation

Next, based on markdown Write component documentation , Let the sample code render in the page like a component .

md-loader

markdown File parsing is based on markdown-it And its community plug-ins .

  1. markdown-it The main parser / Renderers . Official documents
  2. markdown-it-anchor Generate Title anchor . Official documents
  3. markdown-it-container Create a parsing plug-in for the block level custom container . Official documents
  4. markdown-it-chain Support chain calls markdown-it . Official documents
npm i  -D  markdown-it markdown-it-anchor markdown-it-container markdown-it-chain

Other core plug-ins

npm i -D transliteration //  Chinese character to Pinyin 

Customize loader
The project will use element The custom of loader, In the source directory build\md-loader create a file , The directory structure is as follows .

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

index.js File is loader Entry file , By extraction template And script The content of , hold Markdown Turn it into Vue Components .

carbon (57).png

config.js Files use markdown-it-chain To configure markdown-it Options 、 Plug in and container information , initialization markdown-it example .

carbon (58).png

containers.js Files use markdown-it-container To convert custom containers , The custom container :::demo convert to demo-block Components .

carbon (59).png

fence.js Code blocks are rewritten in the file (fence) Default rendering rules .

carbon (60).png

util.js Document supply stripScript stripStyle stripTemplate genInlineComponentText And other methods are used to extract page content and generate components .

carbon (61).png

webpack To configure

establish build/config.js File settings webpack Public configuration information .

carbon (62).png

to update build\webpack.config.js file , Add custom md-loder , Realization markdown File analysis .

carbon (63).png

Document

Write component documentation examples\docs\loading.md

carbon (56).png

install vue-router plug-in unit .

npm i -D vue-router  

newly added examples/router.js File configuration routing information .

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'index',
    // Use vue Asynchronous component technology  ,  You can load on demand  .
    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

adjustment examples The document structure under the directory is as follows , See the source code for details .

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

examples\main.js Incoming routing ,examples\App.vue Update route navigation information .

// 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 Components </router-link>
    </div>
    <router-view />
  </div>
</template>

The page effect is as follows

Animation12.gif

demo-block Components

The above document is very simple , Next write demo-block Components , Support sample component rendering 、 Highlight code and other functions .

Install the syntax highlighting plug-in highlight.js .

npm i -D highlight.js    //  Code highlighting 

establish examples\components\demo-block.vue Components

carbon (19).png

examples\main.js introduce highlight plug-in unit 、 demo-block Components , Configure syntax highlighting theme styles . increase afterEach Global post hook , Highlight the page code block .

carbon (20).png

Component documentation examples\docs\loading.md Update to the agreed document format .

carbon (21).png

Run the program , Page sample code block rendering component , You can expand the source code , Syntax highlight , The effect is as follows :

page1.gif

0x03. Sample code

Github Repo

0x04. Reference resources

Element In document Markdown analysis
element Of demo-block
highlight 97 A list of theme styles

版权声明
本文为[anduril]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/04/20210421232039390Z.html

Scroll to Top