4.X 版本

package.json 中，添加新包 view-design：
```
"dependencies": {
    "view-design": "^4.0.0"
}
```
添加完后需要执行 npm install，或者直接通过 npm install view-design --save 安装新包。
Webpack 入口 main.js 中，把原先引用的 iview 替换为 view-design：
```
import Vue from 'vue';
import ViewUI from 'view-design';

// import style
import 'view-design/dist/styles/iview.css';

Vue.use(ViewUI);
```
同理，如果是按需引用，任何使用 from 'iview' 的都要替换为 from 'view-design'。
如果您在项目中使用了 iview 内置的工具函数文件，比如 iview/src/utils/assist.js 等，都要进行包名替换来使用最新版本，如未使用，请忽略：
```
// e.g.
import { findComponentDownload } from 'view-design/src/utils/assist';

import { on, off } from 'view-design/src/utils/dom';
```

NPM 安装

推荐使用 npm 来安装，享受生态圈和工具带来的便利，更好地和 webpack 配合使用，当然，我们也推荐使用 ES2015。

$ npm install view-design --save

使用之前

高效的开发，离不开基础工程的搭建。在开始使用 View UI 之前，有必要先了解以下基础知识，我们也假设您已经写过 Vue，并掌握了下面的内容。

以下概念贯穿 View UI 前后，建议开发者花点时间来了解。

props 传递数据
slot 内容分发
events $emit @click 事件

你也可以通过学习组件基础内容来快速入门。

使用 Vue CLI 3

我们为最新的 Vue CLI 3 提供了相应的 View UI（iView）插件，如果你正在用 Vue CLI 3，可以直接在插件中搜索 iview，安装插件来使用。

使用推荐工程

我们也为您准备好了基础工程，以此为基础开发，可以为您省去大量配置和调试环境的时间。

推荐工程：view-ui-project

如果您使用了我们推荐的工程，可以略过下面的内容直接进入开发阶段，我们也推荐使用这套工程来构建您的项目。

如果您希望自己配置或使用其它工程，请继续往下阅读。

如果你未接触过 webpack，建议学习 webpack 内容。

引入 ViewUI

一般在 webpack 入口页面 main.js 中如下配置：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';

Vue.use(VueRouter);
Vue.use(ViewUI);

// The routing configuration
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);

new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
});

按需引用

借助插件 babel-plugin-import可以实现按需加载组件，减少文件体积。首先安装，并在文件 .babelrc 中配置：

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "view-design",
    "libraryDirectory": "src/components"
  }]]
}

然后这样按需引入组件，就可以减小体积了：

import { Button, Table } from 'view-design';
Vue.component('Button', Button);
Vue.component('Table', Table);

特别提醒

按需引用仍然需要导入样式，即在 main.js 或根组件执行 import 'view-design/dist/styles/iview.css';

组件使用规范

使用:prop传递数据格式为数字、布尔值或函数时，必须带:(兼容String除外，具体看组件文档)，比如：

Correct usage:
<Page :current="1" :total="100"></Page>

Incorrect usage:
<Page current="1" total="100"></Page>

在非 template/render 模式下（例如使用 CDN 引用时），组件名要分隔，例如 DatePicker 必须要写成 date-picker。

以下组件，在非 template/render 模式下，需要加前缀 i-：

Button: i-button
Col: i-col
Table: i-table
Input: i-input
Form: i-form
Menu: i-menu
Select: i-select
Option: i-option
Progress: i-progress
Time: i-time

以下组件，在所有模式下，必须加前缀 i-，除非使用 iview-loader：

Switch: i-switch
Circle: i-circle

使用 ViewUI（iView）时，可以进行全局配置组件的一些属性。

组件会优先使用 prop 设置的属性，如果未设置，再使用全局配置。

transfer：所有带浮层的组件，是否将浮层放置在 body 内，默认为不设置，详见各组件默认的 transfer 值。可选值为 true 或 false。
size：所有带有 size 属性的组件的尺寸，默认为不设置，详见各组件默认的 size 值。可选值为 default、small 或 large。
4.0.0 capture：所有带下拉的组件是否开启 capture 模式，默认为 true。可选值为 true 或 false。

capture 是浏览器的一种默认行为，如果开启，当可下拉的组件（例如 Select）处于展开状态时，点击外部操作不会立即响应，而是先收起下拉菜单，再次点击才会响应操作。

如果不需要该特性，可以通过全局配置，将 capture 设置为 false。
select.arrow：Select 下拉箭头图标
select.customArrow：Select 自定义下拉箭头图标
select.arrowSize：Select 下拉箭头尺寸
cell.arrow：Cell 右侧箭头图标
cell.customArrow：Cell 自定义右侧箭头图标
cell.arrowSize：Cell 右侧箭头尺寸
menu.arrow：Menu 下拉箭头图标
menu.customArrow：Menu 自定义下拉箭头图标
menu.arrowSize：Menu 下拉箭头尺寸
tree.arrow：Tree 下拉箭头图标
tree.customArrow：Tree 自定义下拉箭头图标
tree.arrowSize：Tree 下拉箭头尺寸
cascader.arrow：Cascader 下拉箭头图标
cascader.customArrow：Cascader 自定义下拉箭头图标
cascader.arrowSize：Cascader 下拉箭头尺寸
cascader.itemArrow：Cascader 右侧箭头图标
cascader.customItemArrow：Cascader 自定义右侧箭头图标
cascader.itemArrowSize：Cascader 右侧箭头尺寸
colorPicker.arrow：ColorPicker 下拉箭头图标
colorPicker.customArrow：ColorPicker 自定义下拉箭头图标
colorPicker.arrowSize：ColorPicker 下拉箭头尺寸
datePicker.icon：DatePicker 日期图标
datePicker.customIcon：DatePicker 自定义日期图标
datePicker.iconSize：DatePicker 日期图标尺寸
timePicker.icon：TimePicker 时间图标
timePicker.customIcon：TimePicker 自定义时间图标
timePicker.iconSize：TimePicker 时间图标尺寸
tabs.closeIcon：Tabs 关闭图标
tabs.customCloseIcon：Tabs 自定义关闭图标
tabs.closeIconSize：Tabs 关闭图标尺寸
modal.maskClosable：Modal 的 maskClosable 属性

用法如下：

Vue.use(ViewUI, {
    transfer: true,
    size: 'large',
    capture: false,
    select: {
        arrow: 'md-arrow-dropdown',
        arrowSize: 20
    }
});

在 Webpack 中使用

完整引入 iView

import Vue from 'vue';
import ViewUI from 'view-design';
import locale from 'view-design/dist/locale/en-US';

Vue.use(ViewUI, { locale });

按需引入 iView

import Vue from 'vue';
// importing ViewUI on demand
import { locale, Page } from 'view-design';
import lang from 'view-design/dist/locale/en-US';

// configure language
locale(lang);

// import components
Vue.component('Page', Page);

兼容 vue-i18n@6.x+

import Vue from 'vue';
import ViewUI from 'view-design';
import VueI18n from 'vue-i18n';
import en from 'view-design/dist/locale/en-US';
import zh from 'view-design/dist/locale/zh-CN';

Vue.use(VueI18n);
Vue.use(ViewUI);
Vue.locale = () => {};

const messages = {
    en: Object.assign({ message: 'hello' }, en),
    zh: Object.assign({ message: '你好' }, zh)
};

// Create VueI18n instance with options
const i18n = new VueI18n({
    locale: 'en',  // set locale
    messages  // set locale messages
});

new Vue({ i18n }).$mount('#app');

兼容 vue-i18n@5.x

import Vue from 'vue';
import ViewUI from 'view-design';
import VueI18n from 'vue-i18n';
import en from 'view-design/dist/locale/en-US';
import zh from 'view-design/dist/locale/zh-CN';

Vue.use(VueI18n);
Vue.use(ViewUI);

Vue.config.lang = 'en-US';
Vue.locale('en-US', en);
Vue.locale('zh-CN', zh);

使用 vue-i18n 时，也可以按需引入 iView 组件，用法与上面的示例类似。

通过 CDN 使用

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>
<script src="//unpkg.com/view-design/dist/locale/en-US.js"></script>

<script>
    iview.lang('en-US');
</script>

结合 vue-i18n 使用

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>
<script src="//unpkg.com/view-design/dist/locale/en-US.js"></script>
<script src="//unpkg.com/view-design/dist/locale/zh-CN.js"></script>

<script>
    // you need to add Polyfill if your browser doesn't support ES2015
    Vue.locale = () => {};
    const messages = {
        en: Object.assign({ message: 'hello' }, iview.langs['en-US']),
        zh: Object.assign({ message: '你好' }, iview.langs['zh-CN'])
    };

    const i18n = new VueI18n({
      locale: 'en', // set locale
      messages // set locale messages
    })
    
    new Vue({
        el: '#app',
        i18n: i18n
    })
</script>

支持的语言

iView 目前已支持以下语言：

简体中文（zh-CN）
繁体中文（zh-TW）
维吾尔语（zh-UG）
英文（en-US）
土耳其语（tr-TR）
西班牙语（es-ES）
日语（ja-JP）
俄语（ru-RU）
法语（fr-FR）
德语（de-DE）
巴西葡萄牙语（pt-BR）
葡萄牙语（pt-PT）
韩语（ko-KR）
越南语（vi-VN）
瑞典语（sv-SE）
印尼语（id-ID）
乌克兰语（uk-UA）
意大利语（it-IT）
泰语（th-TH）
印地语（hi-IN）
波斯语（fa-IR）
罗马尼亚语（ro-RO）
希腊语（el-GR）
荷兰语（nl-NL）
捷克语（cs-CZ）
蒙古语（mn-MN）
传统蒙古语（mn-TR）
芬兰语（fi-FI）
阿拉伯语（ar-SA）
阿拉伯语-埃及（ar-EG）
丹麦语（da-DK）
波兰语（pl-PL）
挪威语（nb-NO）

定制主题

View UI（iVIew）默认提供了一套 UI 主题，并且可以在一定程度上定制新主题，以满足业务和品牌上的多样化视觉需求。

View UI（iVIew）的样式是基于 Less 进行开发的，默认以前缀 .ivu- 作为命名空间，并且定义了一套样式变量，定制主题，就是编辑这个变量列表。

完整的变量列表可以查看默认样式变量。

然后在入口文件 main.js 内导入这个 less 文件即可：

import Vue from 'vue';
import ViewUI from 'view-design';
import '../my-theme/index.less';

Vue.use(ViewUI);

通过安装工具修改

如果没有使用 webpack，可以用我们提供的工具 iview-theme 来编译。

首先需要安装主题生成工具，从 npm 全局或在项目中局部安装，以全局安装为例：

npm install iview-theme -g

然后在业务工程里新建一个目录，用来存放主题文件，使用下面的命令初始化主题，这时会从 iView 仓库拉取最新的样式文件：

iview-theme init my-theme

如需拉取指定版本号的 iView，使用下面的命令。（实际运行下面命令时，需将 xxx 替换成项目所使用的 iView 版本，如 “ v2.14.3 ”）

iview-theme init my-theme xxx

最后编辑 my-theme/custom.less 文件，用命令编译即可：

cd my-theme
iview-theme build -o dist/

最终会在指定的目录下编译为 iview.css 的文件，只需在入口处引用它就可以了，比如在 main.js 文件：

import Vue from 'vue';
import ViewUI from 'view-design';
import '../my-theme/dist/iview.css';

Vue.use(ViewUI);

iview 4.X 指南