企业官网建设流程全解析

• 前端
• UI组件

iView 是一套基于 Vue.js 构建的高质量 UI 组件库，在 README.md 中官方将其定位为 "A high quality UI Toolkit built on Vue.js"，本仓库对应 3.x 版本线（package.json 中版本号为 3.5.4）。本文以官方 README 为主线，完整覆盖安装、引入、基础用法与兼容性说明，并结合 src/index.js 等源码文件，深入讲解组件注册机制、全局配置项、命令式 API 与国际化实现，帮助读者既能在项目中快速落地 iView，又能理解其内部工作原理。

快速上手：安装与引入 iView

通过 npm 安装

官方 README 推荐使用 npm 安装并保存到 dependencies：

npm install iview --save

安装完成后，在入口文件（如main.js）中引入并注册：

import Vue from 'vue'; import iView from 'iview'; import 'iview/dist/styles/iview.css'; // 引入样式 Vue.use(iView);

关于 CSS 的引入，README 提供了独立的import方式：

import 'iview/dist/styles/iview.css';

从 package.json 可以看出，main字段指向dist/iview.js，typings指向types/index.d.ts，且发布包包含dist、src、types三个目录，即安装后可直接引用编译产物、查看源码或使用 TypeScript 类型声明。

通过 script 标签全局引入

不适用打包工具的场景下，README 提供了 CDN/本地文件直接引入的方式：

<script type="text/javascript" src="iview.min.js"></script> <link rel="stylesheet" href="dist/styles/iview.css">

需要说明的是：src/index.js末尾包含一段自动安装逻辑——当检测到全局存在window.Vue时，会直接执行install(window.Vue)，因此 script 标签方式无需手动调用Vue.use()。同时，这种引入方式要求先加载 Vue 再加载 iView 的脚本文件。

基础用法：以 Slider 组件为例

README 给出的最小可运行示例是一个支持区间选择的滑块（Slider）：

<template> <Slider v-model="value" range /> </template> <script> export default { data () { return { value: [20, 50] } } } </script>

该示例使用v-model双向绑定一个[20, 50]数组，range属性开启双滑块区间模式。要理解这些参数的真实语义，可以直接查看 Slider 组件的源码 src/components/slider/slider.vue，其 props 定义如下：

结合示例页理解高级用法

仓库示例页 examples/routers/slider.vue 演示了step、show-stops、range与marks的组合使用：

<Slider v-model="value5"></Slider> <Slider v-model="value6" :step="10" show-stops></Slider> <Slider v-model="value7" range :marks="marks"></Slider>

其中marks支持传入普通文本或配置了style与自定义label的对象：

marks: { 0: '0°C', 26: '26°C', 37: '37°C', 100: { style: { color: '#1989FA' }, label: this.$createElement('strong', '100%') } }

从源码看，markList计算属性会解析marks对象、过滤超出min/max范围的点，并按数值升序排序后渲染刻度；checkLimits方法会强制将用户传入的值钳制在[min, max]区间内，避免越界。

v-model 与事件机制

在 src/components/slider/slider.vue 中，exportValue变化时会依次触发input与on-input事件（支撑v-model），拖动结束或点击轨道时触发on-change事件，并通过Emittermixin 的dispatch('FormItem', 'on-form-change', value)与 Form 组件联动。这意味着 Slider 可以直接放置在Form/FormItem中参与表单校验与提交。

组件全景：从 src/index.js 看组件体系

README 用 "Dozens of useful and beautiful components" 概括组件数量，而实际规模远超 "几十个"。在 src/index.js 中，所有组件被统一注册到components对象，覆盖布局、表单、数据展示、导航、反馈等门类，主要包括：

• 布局类：Layout、Header、Sider、Content、Footer、Row、Col、Split
• 表单类：Form、Input、InputNumber、Select、Option、Cascader、DatePicker、TimePicker、Slider、Switch、Radio、Checkbox、Upload、ColorPicker、Rate、AutoComplete、Transfer
• 数据展示类：Table、Tree、List、Card、Tag、Badge、Timeline、Calendar、Avatar、Carousel、Progress、Circle、Icon
• 导航类：Menu、Submenu、Dropdown、Tabs、Breadcrumb、Anchor、Affix、Steps、Page、BackTop
• 反馈类：Alert、Message、Notice、Modal、Drawer、Poptip、Tooltip、Spin、LoadingBar、Collapse、Split、Scroll

复合组件与别名注册

src/index.js中还定义了复合组件映射，例如ButtonGroup: Button.Group、BreadcrumbItem: Breadcrumb.Item、CheckboxGroup: Checkbox.Group、Option: Option、Submenu: Menu.Sub、Panel: Collapse.Panel、TabPane: Tabs.Pane、TimelineItem: Timeline.Item、ListItemMeta: List.Item.Meta等，使开发者可以在模板中直接使用<Button-Group>、<Option>、<Submenu>等标签，无需单独引入。

此外还提供了一套i前缀的便捷别名：iButton、iInput、iSelect、iTable、iMenu、iForm、iSwitch、iCol、iTime、iProgress、iCircle、iContent、iHeader、iFooter、iOption等，适用于与原生标签名冲突或模板风格偏好的场景。

如上图所示，iView 的组件按 Chart、View、Basic、Form、Navigation、Other 等门类组织，构成了从基础元素到复杂业务组件的完整体系；从 1.x 到 2.x（见 assets/iview2.png）组件门类持续扩充，而本仓库 3.x 版本在此基础上进一步演进。

Vue.use 全局安装与配置项

Vue.use(iView, options)是推荐的接入方式，仓库示例入口 examples/main.js 展示了带 locale 的完整用法：

import Vue from 'vue'; import VueRouter from 'vue-router'; import iView from '../src/index'; import locale from '../src/locale/lang/zh-CN'; Vue.use(VueRouter); Vue.use(iView, { locale });

install 函数做了什么

在 src/index.js 的install函数中，安装过程依次完成：

1. 调用locale.use(opts.locale)与locale.i18n(opts.i18n)应用语言包与自定义 i18n 处理函数；
2. 遍历iview对象中的所有组件，通过Vue.component(key, iview[key])全局注册；
3. 在Vue.prototype上挂载$IVIEW（全局配置对象）以及$Loading、$Message、$Modal、$Notice、$Spin五个命令式 API；
4. 通过install.installed标记防止重复安装。

全局配置 $IVIEW

install函数支持通过第二个参数进行全局配置，读取后写入Vue.prototype.$IVIEW：

Vue.use(iView, { size: 'small', // 全局组件尺寸，如 small / large / default transfer: true, // 是否默认将弹层渲染到 body 下 select: { arrow: 'ios-arrow-down', customArrow: '', arrowSize: '16' }, cell: { arrow: 'ios-arrow-forward' }, menu: { arrow: 'ios-arrow-down' }, tree: { arrow: 'ios-arrow-forward' }, cascader: { arrow: 'ios-arrow-down', itemArrow: '' }, colorPicker: { arrow: '' }, datePicker: { icon: 'ios-calendar' }, timePicker: { icon: 'ios-time' }, tabs: { closeIcon: 'ios-close' }, modal: { maskClosable: true } });

这些配置允许在不修改每个组件 props 的前提下，全局统一各组件内置的下拉箭头、日期图标、关闭图标及其尺寸，也能统一弹层是否通过 transfer 渲染到 body。

命令式 API：以 Message 为例

README 中虽未展开命令式 API，但这是 iView 日常开发的高频能力。以 src/components/message/index.js 为例，this.$Message提供以下方法：

this.$Message.info('这是一条提示'); this.$Message.success('操作成功'); this.$Message.warning('注意：磁盘空间不足'); this.$Message.error('操作失败'); this.$Message.loading('加载中...');

源码实现要点：

• 支持字符串或对象参数，对象可传content、duration、onClose、closable、render；
• 通过defaults = { top: 24, duration: 1.5 }控制默认顶部偏移（24px）与展示时长（1.5s），并可用Message.config({ top, duration })全局调整；
• 每次调用返回一个手动关闭函数，调用即可移除对应消息；
• 五种类型分别映射不同的图标类名（ios-information-circle、ios-checkmark-circle、ios-alert、ios-close-circle、ios-loading），loading 类型额外追加旋转动画类ivu-load-loop。

同仓库中 Modal、Notice、Spin、LoadingBar 也采用类似的命令式封装，分别对应$Modal.confirm/info/success/warning/error、$Notice.open、$Spin.show/hide、$Loading.start/finish/error。

国际化：内置 30+ 语言包

README 未展开国际化，但 iView 提供了完整的 locale 体系。在 src/locale/index.js 中，use()用于切换语言包，i18n()用于接入自定义 i18n 处理函数（如 vue-i18n），t()负责按路径取词并支持插值格式化；若检测到全局Vue.locale存在，还会通过deepmerge将内置语言与用户语言深合并。

语言包位于 src/locale/lang 目录，共 30 余种，覆盖zh-CN、zh-TW、en-US、ja-JP、ko-KR、fr-FR、de-DE、ru-RU、ar-EG、tr-TR、vi-VN、id-ID等。以 src/locale/lang/en-US.js 为例，词条按i.locale、select、table、datepicker、modal等模块组织，默认语言为zh-CN。同时src/index.js导出API.lang(code)，可便捷地按语言代码切换语言包。

TypeScript 支持

README 明确声明 "Supports TypeScript"。仓库在 types 目录下为每个组件提供独立的.d.ts声明文件，例如 types/button.d.ts、types/table.d.ts、types/form.d.ts 等，由 types/index.d.ts 统一导出，并支持import iView from 'iview'与export as namespace iView两种引用方式。使用 TypeScript 的项目可以获得完整的组件 props、事件与命令式 API 类型提示。

兼容性与运行环境

README 列出的兼容性范围如下：

• 支持 Vue.js 2.x（package.json 的peerDependencies为vue: ^2.5.2）；
• 支持 Vue.js 1.x（1.x 组件分类见 assets/iview.png，2.x 见 assets/iview2.png）；
• 支持 SSR（服务端渲染）与 Nuxt.js；
• 支持 TypeScript；
• 支持 Electron 桌面应用；
• 大部分组件与功能支持 IE9 及以上浏览器，部分组件与功能不支持 IE。

仓库的browserslist配置为 "last 3 Chrome/Firefox versions、Safari >= 10、Explorer >= 11、Edge >= 12、iOS >= 10、Android >= 6"，可作为实际构建目标的参考。构建产物还分别提供dist/iview.js（开发版）与dist/iview.min.js（压缩版）以及独立样式dist/styles/iview.css。

本地开发与示例运行

本仓库自带完整的示例应用，入口为 examples/main.js，其中按路由注册了 60 余个组件示例页（examples/routers 目录），可直接作为学习与调试的 Demo 集。本地运行方式参见 package.json 中的 scripts：

npm install # 安装依赖 npm run dev # 启动 webpack-dev-server，默认端口 8081，自动打开浏览器 npm run dev:s # 同上，但监听 0.0.0.0，便于局域网访问 npm run dist # 依次执行样式构建（gulp）、开发版、压缩版与 locale 包的 webpack 构建 npm run lint # ESLint 校验 src 目录（.js 与 .vue） npm run test # lint + tslint + karma 单元测试

其中单元测试基于 Karma + Mocha + Sinon，测试用例位于 test/unit/specs（如 table.spec.js、select.spec.js）。运行环境要求 Node >= 8.9.1、npm >= 5.5.1、yarn >= 1.3.2。

生态与协议

README 还列出了一系列官方生态项目，包括开发者工具 iView Developer、在线运行 iView Run、后台管理模板 iView-Admin、按需加载工具 iView-Loader、Vue CLI 3 插件 iView-Plugin（用于快速搭建 iView 项目）、行政区数据 iView-Area 与编辑器 iView-Editor 等，可用于更完整的工程化落地。

iView 采用 MIT 协议发布（见 LICENSE），版权归 TalkingData（2016 至今）所有，可自由用于商业与非商业项目。

结语

从 README 的安装三步曲，到src/index.js的全局注册与配置体系，再到 Slider、Message 等组件的源码实现，可以看到 iView 3.x 是一套组件覆盖全面、接入成本低、配置灵活、生态完备的 Vue.js UI 组件库。本文所有结论均可在本仓库对应文件中直接验证，读者可结合 examples/routers 下的示例页与 src/components 下的组件源码进行深入研读。

• 前端
• UI组件