UI component library from 0 to 1 development experience

As the company continues to grow, the team is also gradually expanding. In order to improve the development efficiency, it is necessary to develop a set of mobile UI component library that conforms to the internal company. Fortunately, I was finally in charge of the permanent job. Our company’s technology stack is VUE, so the UI component library is developed based on VUE.

This article mainly tells me in the development process of some ideas and methods to solve the problem, as for the code you can refer to (at the bottom of this article there is a link). Component development is not much, there are many excellent libraries in the circle more worthy of you to learn, the next talk about my ideas and practice.

A,

Develop a directory structure

Technology selection

I use Webpack and gulp for resource management tools. I use gulp because the component styles and functions are packaged separately and gulp tasks are easy and convenient to write. Speaking of the style, I choose less, because I have been using less in my work. Unit test karma of choice. There are other helper tools such as Babel, ESLint, PostCSS, etc. See the package.json file for details.

Two, get started

Dev-server is installed, the dev script is configured, webpack.dev.config is written in the build folder, entry points to the examples folder, and debugging of development components is done in this folder. The examples directory structure is similar to vuE-CLI scaffolding, where flexible-.js is used for the company project, and is also used for case debugging in order to conform to the development habits of other members. I also set rootValue in the PostCSS-pxtorem configuration to comply with the team specification, which should be noted if you are looking at the code. I also did some work with the component packaging, which I’ll cover later.

Once the service is up and running, components are written. This part of the effort is mainly focused on the packages folder, a brief description of my design idea, each component according to the name of the function to create a sub-folder, the output of index.js, which is convenient for on-demand loading requirements. Write the functional code of the component in SRC. Finally, all components are input and output in the index.js file in the root directory SRC. A trick I used here is to use require.context for code optimization in order to prevent more and more components from being written. Since then, I have used this scheme for optimization and modification wherever files are introduced in a large number and regularly.

It is inevitable to use icon in component development. Here, I use gulp’s two plug-ins gulp-iconfont and gulp-iconfont CSS to convert SVG files into font styles. If you are not using gulp, look for the corresponding plug-in library to introduce it.

After the component is written, import it in the examples main.js file with the following effect:

Documents and packaging

Now that the functionality is developed, make a document introduction page that you can see. This part is developed in Docs. For better user experience, the document is compatible with PC and mobile terminals, using media. There are many other UI component documents that show the style model of the mobile phone. I have observed a few that use the github. IO service introduced in iframe. For the record, I didn’t do that here. Instead, I packaged examples into the dist directory. When I started the Docs service for development, the mobile model introduced pre-packaged examples static files. If you want to get the latest examples, you need to package the Examples first and start the Docs service. One area that might be uncomfortable is that Example and Docs are developed at the same time. I didn’t design to run both services at the same time or integrate the two together. My reason is if you want to write the case, write the case, if you write the document first don’t write anything else.

Package in the build folder, which are respectively webPack’s confusing compression of JS and gulp’s processing of style files. It says above that in order to better conform to the development habits of the team, I use Flexible in examples, because we also use it in our work. When I package the style, Each component style is compressed in two versions, respectively in rem and PX units, and REM is processed by PXtoREM. I won’t go into much more detail, but you can look at my code.

module.exports = {
  plugins: {
    "postcss-pxtorem": {
      "rootValue": 75,
      "propList": ["*"]}}}Copy the code

And finally, unit tests, which I’m still learning, so I won’t go into that.

Four,

Now that the component library’s 0-1 work is done, a quick summary of my development lessons:

Think first to write, will be less detours. This month’s work has allowed me to accumulate a lot of development experience, which has improved my structural thinking ability a lot. Generally speaking, it is good. Finally attached address, welcome to reply together progress.

github

home page

Good luck in your work

Wen-bin deng

14 February 2019