iView

定义

iView是一套基于Vue.js的开源UI组件库，官方将其定位为主要服务于PC界面中后台产品的前端组件集合^[1]。它以组件形式封装按钮、表格、表单、日期选择器等常用界面元素，开发者通过在Vue.js项目中引入相应组件来减少重复编写基础界面代码的工作^[2]。该库的代码托管在GitHub上，采用MIT协议开源^[3]。

在技术定位上，它属于前端框架生态中的配套UI层：底层交互与数据绑定由Vue.js负责，而iView负责样式规范、布局栅格与可复用组件的实现。官方文档说明其布局借鉴了Bootstrap与Ant.Design的栅格思路，采用每行最多容纳24列的栅格体系^[4]。

原理

iView的实现方式是提供一系列以单文件组件形式编写的Vue组件，每个组件通过props接收外部数据，通过事件向外部通知状态变化，并可用slot接收插入内容；使用时在入口文件中调用Vue.use注册整个库，或以按需方式单独引入组件及其样式^[2]。组件本身以npm包形式分发，也可通过script标签在页面中全局引入^[5]。

按需引入依赖babel-plugin-import插件，在编译阶段把整包引用改为对具体组件目录的引用，以减小打包体积；即便如此，样式文件仍需单独导入^[2]。其数据流向可概括为以下结构：

$\text{组件props} \rightarrow \text{Vue响应式数据} \rightarrow \text{虚拟DOM渲染} \rightarrow \text{页面DOM}$^[1]

在兼容性上，该库大部分组件支持IE9及以上浏览器，少量组件与动画效果不支持IE；官方说明其不支持IE8及更低版本，原因是Vue.js依赖Object.defineProperty追踪数据变化，而旧版浏览器不具备该能力^[6]。

发展历程

该项目于2016年7月28日立项，最初是开发团队内部使用的组件集合，随后以开源方式发布^[7]。作者在回顾文章中说明，立项时团队考察市面上的Vue组件库，发现面向PC中后台且功能完整的产品较少，因此决定自行开发维护^[4]。名称取自Apple产品命名方式加上Vue的发音，因为当时GitHub上尚未被占用^[4]。

2017年7月28日项目满一周年，同时发布2.0正式版。该版本最重要的变化是支持Vue.js 2，并新增服务端渲染与Nuxt.js支持；表格单元格改用Render函数渲染，Select支持远程搜索，Cascader支持异步加载与搜索^[7]。从2.0起，版本代号以获得过Apple Design Awards的游戏或独立游戏命名，2.0的代号为Leo's Fortune^[7]。同年团队将文档完整翻译为英文^[7]。

3.0版本于2018年7月28日发布，随后的3.1.0版本开始支持TypeScript与Vue CLI 3^[8]。2019年，作者创办北京视图更新科技有限公司，全职维护该组件库；2019年10月，组件库从iView正式更名为View UI并启用新标识，4.0版本同时发布，npm包名由iview改为view-design^[9]。

此后产品线升级至Vue.js 3，推出开源免费的View UI Plus，新增树选择、城市选择器、登录、通知菜单、日历等30余个组件，组件总数接近100个，同时保留原View UI的绝大部分API；由于Vue 3自身的限制，该版本不再兼容IE浏览器^[10]。旧版2.x的官方文档页面已标注停止维护，并提示升级至新版本^[11]。

应用

该组件库的典型使用场景是PC端的中后台系统，包括运营平台、数据监控平台与管理后台等，官方说明其更适合此类产品，对面向普通消费者的前端项目适配性一般^[4]。这一取向与其组件构成有关：表格、表单、分页、导航菜单等中后台高频元素占比较大^[1]。

围绕核心库，还形成了若干配套项目，例如后台集成方案iView Admin、命令行工程iview-project与Vue CLI 3插件，以及面向微信小程序的移植版本iView Weapp^[2]。这些配套工程的作用是省去环境配置环节，使项目可以直接进入业务开发^[2]。

在实际工程中，组件库需要与打包工具配合使用，官方推荐通过npm安装并以webpack作为构建工具，因此使用者的项目通常已具备基于Node.js与ES2015模块的构建流程^[4]。

局限

浏览器支持方面存在明确边界：该库不支持IE8及以下版本，IE9虽然大部分组件可用，但部分功能与动画效果无法正常呈现，官方建议在Chrome、Safari、Firefox等浏览器下使用^[6]。

面向Vue.js 3的View UI Plus基于Vue 3重写，因此不再兼容IE浏览器；若项目需要支持IE9及以上，官方建议继续使用Vue.js 2搭配View UI^[12]。此外，升级到Vue 3后部分API因框架规定而变更，例如双向绑定属性由value改为model-value，旧项目的迁移需要相应改动代码^[10]。

版本维护上，2.x系列已停止维护，使用旧版的开发者需按升级指南迁移；从4.0.0起旧的npm包名不再使用，涉及包名引用的位置都要逐处替换^[13]。适用范围方面，该库以PC端中后台为核心场景，移动端界面并非其设计目标，官方也明确其主要服务于PC界面产品^[14]。

参见

• Vue.js —— 该组件库所依赖的前端渐进式框架。

• Ant Design —— 其栅格与设计规范曾被借鉴的同类界面方案。

• Element UI —— 同样面向Vue.js的PC端组件库，常被并列讨论。

• Nuxt.js —— 官方声明支持的服务端渲染框架。

• npm —— 该组件库的分发渠道。