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).

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

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 .

Refer to the component

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

stay examples/App.vue Add component references to

The page effect is as follows

0x02. Write component documentation

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


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 .

| ├─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 .

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

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

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

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

webpack To configure

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

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


Write component documentation examples\docs\loading.md

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',

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

| ├─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({
render: (h) => h(App),
}).$mount('#app'); // App.vue
<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>
<router-view />

The page effect is as follows

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

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 .

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

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

0x03. Sample code

Github Repo

0x04. Reference resources

Element In document Markdown analysis

element Of demo-block

highlight 97 A list of theme styles

04.ElementUI Source code learning : Component encapsulation 、 Description of the preparation of documents published more related articles

  1. modify elementUI Source code new components / Modify components

    Preface Often we meet elementUI There are 5% Not meeting the needs we want , First, we rewrite the components , Second, we change the source code install element https://github.com/ElemeFE/element ...

  2. element-ui Source code component communication those things

    Recently in use element-ui Refactoring front end projects , Inadvertently browse to a better way to communicate between components , With the help of vue Packaged release of - Subscription message mode and mixin grammar . Summarize before you start vue Common communication between components , As follows : ...

  3. element-ui Source code learning

    https://athena0304.github.io/element-analysis/ 1. Template string realizes string splicing typeClass() { return `el-alert--${ thi ...

  4. 【iScroll Source code learning 04】 Separate IScroll The core

    Preface In recent days, we will basically iScroll I've learned about source code , I'm going to read the articles that are not mentioned in the article 1. [iScroll Source code learning 03]iScroll Event mechanism and implementation of scroll bar 2. [iScroll Source code ...

  5. MVC series ——MVC Source code learning : Build your own MVC frame ( Four : Learn about the amazing view engine )

    Preface : Through the previous three introductions , We have basically completed the process from request sending to route matching . And then to the activation of the controller , Until then Action The execution of these processes . It's still hot today , Take us View Let's improve , It also makes the whole series relatively complete , Bloggers don't want to end up . ...

  6. MVC series ——MVC Source code learning : Build your own MVC frame ( 3、 ... and : Custom routing rules )

    Preface : The first part introduces my own MVC The first two versions of the framework , After two days of tidying up , Version three is basically finished , Today, I still send it out for your reference and study . Although Microsoft's Routing It's already very powerful , There's no need at all to “ Repeat the wheel ” 了 , But bloggers still feel ...

  7. MVC series ——MVC Source code learning : Build your own MVC frame ( Two : Source code attached )

    Preface : The first part introduces the following MVC5 The core principle of , The whole article is more theoretical , So it's relatively boring . Today, we will practice step by step according to the theory in the first part , By writing a simple MVC Understanding the framework step by step , I believe that through the practice of this article , You will be right. MVC There is one ...

  8. MVC series ——MVC Source code learning : Build your own MVC frame ( One : The core principle )

    Preface : I have been studying recently MVC Source code , Tell the truth , It's a painful process to study the source code , A lot of obscure grammar makes people dizzy . These two days, I understand a small part , Here's a record , It also gives a reference to those who need it , However, the technology of blogger is limited , If there is any misunderstanding ...

  9. Vue2.1.7 Source code learning

    The original name of the article is < The source code parsing >, But think about it later , Or use it “ Source code learning ” It's a little more appropriate , Without a thorough grasp of every letter in the source code ,“ analysis ” It's a bit of a headline party . Before reading this article , It's better to turn on 2.1.7 Source code for ...

  10. spring Source code learning ——spring Overall architecture and design philosophy

    Spring Is in Rod Johnson Of <Expert One-On-One J2EE Development and Design > It's derived from . The main purpose is through the use of basic java ...

Random recommendation

  1. C Language battle-hardened 9

    // subject 25: seek 1+2!+3!+...+20! And #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib ...

  2. Get property set by property set name id

    Mage::getModel('eav/entity_attribute_set')->load(' Property set name ', 'attribute_set_name')->getAttributeS ...

  3. css Using variables in

    2017 year 3 month , Microsoft announces Edge The browser will support CSS Variable . This is important CSS new function , All major browsers already support . Statement css Variable time , The variable name should be preceded by two hyphens (--). Variable names are case sensitive ,-- ...

  4. java_web Study ( 7、 ... and ) MySQL Configuration and installation of

    One : download MySQL 1. Get into oracle Official website 2. 3. 4. 5. 6. 7. website :https://dev.mysql.com/downloads/file/?id=469273 Two : To configure MySQ ...

  5. Learn together HBase—— summary HBase Medium PUT、GET、DELETE operation

    Traditional relational databases have CRUD Add, delete, change and check operation , For the same NoSQL Column databases also have CRUD operation . This paper deals with HBase Commonly used Scan.GET.PUT.DELETE Summarize the usage of operation . Put operation Put Equivalent to tradition ...

  6. Error: The INF file contains Unicode characters that could not be converted correctly

    Yesterday for the first time for their own windows mobile Programming CAB Installation package , But in the generation process , But there is such a problem : Compile the complete -- 0 A mistake ,0 A warning time -> G:\WindowsMobil ...

  7. Hudson Package and deploy to Was It's very slow on the road

    One . Look for problems 1. Packing is quick , It's slow to deploy 2. Deploy to other was It's also very slow Two . solve After searching for , Find the following passage on the Internet : The problem is web.xml,web.xml Wrong version information in , According to your servlet Version and operation ...

  8. Jenkins Installation and deployment ( One )

    Environmental preparation CentOS Linux release 7.4 1.IP: 2. route :/mnt 3.jdk edition :jdk1.8.0 4.tomcat edition :tomcat-8.5 5 ...

  9. mysql Only modify the date , Time, minute and second

    For example, time is “2014-12-11 13:12:01” It is amended as follows “2014-09-26 13:12::01” The content of the amendment is to amend yyyy-mm-dd Is the corresponding date , Time invariable .UPDATE result_road_ ...

  10. -27979 LoadRunner error 27979 Request form not found Action.c(73): Error -27979: Requested form not found

    LoadRunner The request could not find : Recording Web In the process of protocol script playback , The request cannot be found , Which causes the script to stop running . Error phenomenon :Action.c(41): Error -27979: Request ...