快速上手
高效的开发,离不开基础工程的搭建。在开始使用 iView 之前,有必要先了解以下基础知识,我们也假设您已经写过 Vue,并掌握了下面的内容。
以下概念贯穿 iView 前后,建议开发者花点时间来了解。
传递数据
slot
内容分发events
$emit
@click
事件 你也可以通过 学习组件基础内容 来快速入门。
使用 Vue CLI 3
我们为最新的 Vue CLI 3 提供了相应的 iView 插件,如果你正在用 Vue CLI 3,可以直接在插件中搜索 iview,安装插件来使用。
我们也为您准备好了基础工程,以此为基础开发,可以为您省去大量配置和调试环境的时间。
推荐工程:iview-project
如果您使用了我们推荐的工程,可以略过下面的内容直接进入开发阶段,我们也推荐使用这套工程来构建您的项目。
如果你未接触过 webpack,建议 。
引入 iView
一般在 webpack 入口页面 main.js
中如下配置:
借助插件 babel-plugin-import可以实现按需加载组件,减少文件体积。首先安装,并在文件 .babelrc
中配置:
特别提醒
- 按需引用仍然需要导入样式,即在 main.js 或根组件执行
import 'iview/dist/styles/iview.css';
使用传递数据格式为 数字、布尔值或函数时,必须带:
(兼容String除外,具体看组件文档),比如:
在非 template/render 模式下(例如使用 CDN 引用时),组件名要分隔,例如 DatePicker
必须要写成 date-picker
。
以下组件,在非 template/render 模式下,需要加前缀 i-
:
- Button:
i-button
- Col:
i-col
- Input:
- Form:
i-form
- Menu:
i-menu
- Select:
i-select
- Option:
i-option
- Progress:
i-progress
- Time:
i-time
- Circle:
i-circle