preface

This article aims to provide you with an idea to build a complete UI library scaffolding: including how to quickly and elegantly build the UI library home page, how to host the home page, how to write scripts to improve their development efficiency, how to generate CHANGELOG and so on, here provides a Demo for your reference:

Online Demo Address

GitHub source address

Initialize the directory structure

The main open source UI library code structure is divided into three parts:

  1. The code for the component library itself: this part of the code is published to the NPM
  2. Preview examples and view document code for sites like Vant, ElementUI, etc.
  3. Configuration files and script files: for packaging, publishing, and so on

Initialize a template with vuE-cli3. Then add three new folders in the root directory, one for components (packages) and one for examples (examples). One for storing script code (build)

You can name the file as you like.

Completing a component

See the Github source code for the code organization. Note that we try to name the folder after the component name, and then create the index.vue component within the folder. This is done so that we can use code to generate the contents of the index.js entry file directly later.

Separation of style files

In order to better handle styles, we have to deal with all style files separately (code address), using Gulp mainly for tasks.

Release NPM package

packaging

Once we’ve finished a component, we’re ready to package it. Packaging is easy, thanks to the build command in VUE-cli3 that introduces the build target argument, just execute it

vue-cli-service build --target lib --name vue-cards --dest lib packages/index.js
Copy the code

You can package all code under Packages in library mode.

In library mode, Vue is external. This means that there is no Vue in the package, even if you import the Vue in your code. If the library will be used through a wrapper, it will try to load the Vue in a dependent manner through the wrapper; Otherwise it falls back to a global Vue variable.

release

Before publishing, we need to create a.npmignore file, which contains files or folders that do not need to be published to the NPM package, and write the same as.gitignore. The details of how to publish an NPM package are not detailed here.

Document preparation and release

write

Most people find the hardest part of writing an open source UI library to document, but how to build a website like ElementUI quickly and elegantly? The most popular way to write documents is through Markdown, so we need to solve the problem of how to HTML markdown documents and display them directly on the page. Here we can use the vue-markdown-loader plug-in. The specific configuration of the plug-in can be viewed in the vue.config.js file of the project. The specific effect of this project is shown in the figure below:

markdown
vue

(Specific code address of the project website)

release

We can use GithubPages to publish our document website. There are many tutorials on how to use GitHub Pages, such as getting started. There is also a very simple way to use the GH-Pages tool to publish to the GH-Pages branch of the repository in one click. You can refer to the build/publish-docs.js file of this project for configuration and usage.

Some ways to improve development efficiency

Under the build folder of this project, there are many files that can greatly improve our development efficiency. Here are some of their uses.

The purpose of the get-components.js file is to get all the component directories in the Packages directory in preparation for building the packages entry files.

The build-entry-js file is based on the results of get-components.js and then writes the code to /packages/index.js to generate the entry file.

The build-lib.js file is mainly used to prepare for the release of NPM packages, including build entry files, build libraries, build style files, etc.

The publish-docs.js file is used to publish documents to the gh-Pages branch of the repository with one click.

The release. Sh script is a collection of commands for distributing NPM packages, including many git and NPM operations.

Quickly generate CHANGELOG

CHANGELOG we can write our own MD documents, which of course is not wise. We prefer to use code to automate generation. The principle is to extract your Git submission information and write it into a file. Here we can use Xconventional – Changelog to generate Changelog. In order to generate more detailed and correct CHANGELOG documents, we need to strictly standardize our submission records. We can use cz-Xconventional – CHANGELOG standard submission records. For details, please refer to CZ-CLI. The init script of package.json of this project also encapsulates related script commands, for your reference.

reference

  1. vant – Lightweight Mobile UI Components built on Vue
  2. Element -A Vue.js 2.0 UI Toolkit for Web
  3. vue – Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
  4. Best solution: Vue CLI3 library model builds component library and publishes to NPM