一、背景

  在一般项目中，直接采用iView、Element UI往往就可以满足需求。但是对于一些较为复杂的项目，在实际开发中会遇到如下问题：
（1）iView、Element UI等视图框架不能满足功能需求。
（2）公司或内部有自己的前端规范，视图层面需要贴合规范。
（3）项目迭代快，组件的可维护性变得十分重要。
（4）视图组件集中管理，后期可能演变成部门或公司级框架。

二、视图框架搭建

  搭建方法主要参考iView的源码，具体步骤如下。

（1）构建框架文件结构

  index.js为入口文件，每个文件夹下为一个UI组件。

---myUI
   ---myUIInput
      ---myUIInput.vue
   ---myUIMask
      ---myUIMask.vue
   ---index.js

（2）入口文件index.js编写

  index.js主要讲该文件夹下的视图组件注册到Vue的component下，以便后期使用时，不需要在各个组件中进行引入。在使用Vue.use的时候，会自动调用对象中的install方法，并将Vue传入。

import myUIInput from './myUIInput/myUIInput';
import myUIMask from './myUIMask/myUIMask';

const myui = {
    myUIInput,
    myUIMask,
}

const install = function(Vue){
  if (install.installed) return;
  
  // 循环注册
  Object.keys(myui).forEach((key) => {
     Vue.component(key, myui[key]);
  });

  // 挂载到Vue上
  Vue.prototype.$myMask = myUIMask;

  install.installed = true;
}

const API = {
    install,
    ...myui,
};

export default API;

  需要注意的是，如果想在js代码中直接使用组件，比如iView的message组件，需要将组件挂载到Vue的原型链上。

Vue.prototype.$myMask = myUIMask;

（3）框架使用

  直接在main.js中引入（main较大时，需要对其分类引入），并采用Vue.use的方式即可。

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

三、思考

  本文只是介绍了基本的框架搭建。个人认为，一个视图组件库还涉及如下几点：
（1）流程把控，一个视图组件库中的组件需要做到通用，功能不重复，这就需要对于流程进行把控。
（2）文档的编写，避免使用和维护过程中产生的问题无从考究。
（3）测试用例的引入。
（4）是否需要使用typescript进行编写。