快速上手

使用之前

高效的开发,离不开基础工程的搭建。在开始使用 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 中如下配置:

  1. import Vue from 'vue';
  2. import VueRouter from 'vue-router';
  3. import App from 'components/app.vue';
  4. import Routers from './router.js';
  5. import ViewUI from 'view-design';
  6. import 'view-design/dist/styles/iview.css';
  7. Vue.use(VueRouter);
  8. Vue.use(ViewUI);
  9. // The routing configuration
  10. const RouterConfig = {
  11. routes: Routers
  12. };
  13. const router = new VueRouter(RouterConfig);
  14. new Vue({
  15. el: '#app',
  16. router: router,
  17. render: h => h(App)
  18. });

按需引用

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

  1. npm install babel-plugin-import --save-dev
  2. // .babelrc
  3. {
  4. "plugins": [["import", {
  5. "libraryName": "view-design",
  6. "libraryDirectory": "src/components"
  7. }]]
  8. }

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

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

特别提醒

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

组件使用规范

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

  1. Correct usage:
  2. <Page :current="1" :total="100"></Page>
  3. Incorrect usage:
  4. <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