Teach yourself to create a Vue UI component library similar to Element

What this article brings to you is about teaching yourself to create a Vue UI component library similar to element, there is a certain reference value, the need for friends can refer to, I hope to help you.

Objective

With the emergence of the three main frame of the front-end, the idea of component becomes more and more popular, and many component libraries appear. It can help developers save time and improve efficiency.
Such as React's Ant-design,vue iview,element and so on, their function has been very perfect.
The purpose of my writing this passage: to record the process of building a UI library (a lot of understanding of Vue has deepened) presentation address
First, let's talk about ideas:
When you write a component, write a component and import it directly, as you write a time.vue.

Import time from ' path '

Now to write a component library, is not to put all components in a folder (such as, button.vue icon.vue , input.vue ...), by Vue.components registering all components, and then through the Vue.use() installation of the implementation, which is why the plug-in vue ideas, not so mysterious

1. Environmental preparedness

In front of all the components in a folder, the simplest is to use scaffolding to build a project directory structure,
You also need to add a sample document----to facilitate debugging and presentation:
Example Effect of a button

Now consider the more important two points: directory structure and sample documentation
1. Directory Structure
Build the project structure directly with VUE-CLI and modify it on the basis ( To meet our example)
directory structure

. ├──build-------------------------Webpack Related configuration file │├──build.js│├──check-versions.js│├──logo.png│├──strip-t Ags.js│├──utils.js│├──vue-loader.conf.js│├──webpack.base.conf.js is used when configuring the markdown settings-------│├──webpack.dev.c Onf.js│└──webpack.prod.conf.js├──config------------------------The basic configuration of Vue │├──DEV.ENV.JS│├──INDEX.JS│└──PR Od.env.js├──examples-----------------------Placement Example │├──app.vue--------------------root file │├──assets------------------- --Static resource ││├──css--------------------css││├──img--------------------picture ││└──logo.png---------------Vue Logo│├──components-----------------Common Components ││├──demo-block.vue---------box assembly ││├──footer.vue-------------F Ooter Component ││├──header.vue-------------Header assembly ││└──side-nav.vue-----------Sidebar component │├──docs----------------- Documentation for------Example Module ││├──BREADCRUMB.MD----------breadcrumbs Component Document ││├──BUTTON.MD--------------button Component Document ││├──CARD.MD---- ------------Card Components Document ││  ├──guide.md---------------Introduction Document ││├──ICON.MD----------------Icon document ││├──INSTALL.MD-------------installation document ││   ├──layout.md--------------Layout document ││├──LOGS.MD----------------Update the log document ││├──MESSAGE.MD-------------message document ││ ├──start.md---------------Quick Start 1 document ││├──TAG.MD-----------------label document ││└──TWOTABLE.MD------------Two-dimensional form document │ ──icon.json------------------icon Data │├──main.js--------------------Portal file │├──nav.config.json------------Sidebar data │└─ ─router---------------------Routing │└──index.js---------------routing configuration ├──packages-----------------------component library Source code │├── Readme.md------------------readme│├──breadcrumb-----------------breadcrumbs Source ││├──index.js││└──src│├──brea Dcrumb-item------------crumbs Source ││└──index.js│├──button---------------------Button Source code ││├──index.js││└──s   Rc│├──card-----------------------Card Source code ││├──index.js││└──src│├──col------------------------Column Layout source │   │├──index.js││└──src│├──message--------------------Message Source ││├──index.js││└──src│├──two-dimensional-table-----Two-dimensional tabular source  Code ││├──index.js││└──src│├──row-----------------------Line source code ││├──index.js││└──src│├──tag -----------------------tag source ││├──index.js││└──src│├──theme-default--------------style sheet ││└──lib│├ ──package.json│└──index.js-------------------Component Library entry ├──index.html---------------------home ├──package.json├── Static└──readme.md

The above is a modified directory structure, the scaffolding generated by the SRC directory to examples used to put the sample document, so you want to modify the build directory under the Webpack.base.conf.js, so that it points to examples, Webpack in order to properly package

Sample documentation, writing documents using Markdown most suitable, to enable Vue to implement Markdown documents can be used Vue-markdown-loader, configuration related files in Webpack.base.conf.js rules to add

You can start writing a document and test it.

{  path: '/hello ',  name: ' Hello ',  component:r = Require.ensure ([], () = R (Require (') '. /docs/hello.md '))          }

NPM Run Dev Run project opens Http://localhost:8080/#/hello, can be displayed, initial success (Basic implementation)
The next step is to implement the results of the sample document: both demo and code display ( e.g.)

As an example of the document is BUTTON.MD, to let it in button.md a file where you want to display code where the code, want to display the button where the button, so you have to display the button where the identifier,

Let the compilation process be able to identify, install. Vue to compile the show or use the markdown configuration, it actually encapsulates the markdown-it, support options, just add the defined identifier (I use ' demo '), Options configuration ( Also in Webpack.base.conf.js)

Const Vuemarkdown = {preprocess: (markdownit, source) = = {MarkdownIt.renderer.rules.table_open = function () { Return ' <table class= ' table ' > '} MarkdownIt.renderer.rules.fence = Utils.wrapcustomclass (markdownit.rendere r.rules.fence) Const Code_inline = MarkdownIt.renderer.rules.code_inline MarkdownIt.renderer.rules.code_inline = Fun Ction (... args) {args[0][args[1]].attrjoin (' class ', ' Code_inline ') return Code_inline (... args)} return s Ource}, use: [[Markdownitcontainer, ' demo ', {///for verifying the code block containing the demo validate:params = Params.trim (). MATC        H (/^demo\s* (. *) $/), render:function (tokens, idx) {var m = Tokens[idx].info.trim (). Match (/^demo\s* (. *) $/);          if (tokens[idx].nesting = = = 1) {var desc = tokens[idx + 2].content; Compiled into HTML const HTML = utils.converthtml (striptags (tokens[idx + 1].content, ' script '))//Remove description to prevent being added to code          Block Tokens[idx + 2].children = []; ReTurn ' <demo-block> <p slot= "desc" >${html}</p> <p slot= "        Highlight ">";      } return ' </p></demo-block>\n '; }    }]  ]}

In fact, this is going to be when the parser encounters the identifier with the demo will add our prepared Demo-block components, according to the above rules to parse into an AST (abstract syntax tree), and then compile it into HTML
So when you write an example document, you can write this

2. How to write component source code

In fact, it's not as difficult as it is to write components, just to write a certain structure (specifically to see my GitHub), the General UI component library supports global ingestion and the introduction of a single component.
Global Introduction:

Const INSTALL = function (Vue) {  if (install.installed) return  components.map (component = Vue.component ( Component.name, component)}

Traverse the components you write, register to the Vue via Vue.component, form an install function, expose the install, and use the Vue.use (like any other plug-in) when you need to install the package for another project.
Single File Introduction:

Export Default {  install,  JButton,  JCol,  jrow,  JTag,  jbreadcrumb,  Jbreadcrumbitem,  Jcard,  towtable}

Similarly, just exposing the component will be OK.

Others want to be able to install our package via NPM, we are not going to write in the package so components and styles, others just as NPM installs the package and introduces a full component style two steps can be used

3. NPM publishes your UI framework

1. You want to have a NPM account (not directly to the official website to register a)

2. Open Terminal Login NPM

NPM Login

3. Release the Package
We only publish packages this folder on line, write good packages folder next Package.json

{  "name": "Jk-ui",  "version": "1.0.9", "  description": "UI base on Vue",  "main": "Index.js",  " Scripts ": {    " test ":" Echo \ "Error:no test specified\" && exit 1 "  },  " repository ": {    " type ":" Git ",    " url ":" Git+ssh://git@github.com/liuyangjike/jkui.git "  },  " keywords ": [    " UI "  ],  "Author": "Jike",  "license": "ISC",  "bugs": {    "url": "https://github.com/liuyangjike/JKUI/ Issues "  },  " homepage ":" Https://github.com/liuyangjike/JKUI#readme "}

Using NPM publish release is OK, others can use NPM install Jk-ui--save Happy play