The background,

In a typical project, using the iView, Element UI will often suffice. However, for some relatively complex projects, the following problems will be encountered in the actual development: (1) View frameworks such as iView and Element UI cannot meet the functional requirements. (2) The company or internal has its own front-end specifications, and the view level needs to conform to the specifications. (3) As the project iterates rapidly, the maintainability of components becomes very important. (4) Centralized management of view components may evolve into departmental or company-level frameworks in the later stage.

Second, view frame construction

The construction method mainly refers to the source code of iView, and the specific steps are as follows.

(1) Build the framework file structure

Index.js is the entry file, and under each folder is a UI component.

---myUI
   ---myUIInput
      ---myUIInput.vue
   ---myUIMask
      ---myUIMask.vue
   ---index.js
Copy the code

(2) preparation of the entry file index.js

Index.js registers the view components in this folder with the Component of Vue, so that they do not need to be imported into each component for later use. When vue. use is used, the install method in the object is automatically called and the Vue is passed in.

import myUIInput from './myUIInput/myUIInput'; import myUIMask from './myUIMask/myUIMask'; const myui = { myUIInput, myUIMask, } const install = function(Vue){ if (install.installed) return; Keys (myui).foreach ((key) => {Vue.com (key, myui[key]); }); Prototype.$myMask = myUIMask; install.installed = true; } const API = { install, ... myui, }; export default API;Copy the code

Note that if you want to use components directly in JS code, such as the Message component of iView, you need to mount the component to the prototype chain of Vue.

Vue.prototype.$myMask = myUIMask;
Copy the code

(3) Frame use

Directly import it in main.js (if main is large, it needs to be classified into it) and use vue. use.

import myUI from 'xx/myUI';
Vue.use(myUI)
Copy the code

Three, think

This article only introduces the basic framework building. In my opinion, a view component library also involves the following points: (1) process control. Components in a view component library need to be universal and their functions should not be repeated, which requires process control. (2) The preparation of documents, to avoid the use and maintenance of the process of problems are not easy to find. (3) Introduction of test cases. (4) Whether you need to write in typescript.