快速上手

写在前面

文档中会出现的以下 emoji 图标标识。☕️ 图标表示提示或建议,⚠️ 图标表示一般注记,❗ 图标表示警告或警示。

在快速上手 GearCase 之前,您最好确保已经查阅过 VueVue单文件组件等文档或了解 Vue 相关的基本概念。若您对此还没有了解,建议您快速查阅 Vue 官方文档 进行学习与了解。


安装

具体安装方式请参考 安装 章节。


引入 GearCase

默认您使用 vue cli 构建工具进行 Vue 项目的构建。

样式引入

在项目的 main.js 入口文件单独引入 gear-case 样式。

// main.js 

import 'gear-case/dist/gear-case.css'

️⚠️ 注意样式在 main.js 中进行引入,建议首先引入样式。

组件引入

在需要使用 GearCase 组件的 Vue 单文件组件中,引入组件。

// 引入组件
import {
  Icon,
  Button,
  ButtonGroup,
  Input,
  Row,
  Col,
  Layout,
  Header,
  Sider,
  Content,
  Footer,
  Toast,
  plugin,
  Tabs,
  TabsItem,
  TabsNav,
  TabsPane,
  TabsContent,
  Popover,
  Cascader,
  CascaderItems,
  Collapse,
  CollapseItem,
  Springs,
  Slides,
  Nav,
  NavItem,
  NavSub,
  Pagination,
  Table
} from 'gear-case'

️⚠️ 在使用 import 进行组件引入时,各组件名称如上所示。


注册组件

在已经使用 import 引入之后的 Vue 单文件组件中,使用 components 进行组件的注册。

export default {
  components: {
    'gear-icon': Icon,
    'gear-button': Button,
     ...  // 使用 components 注册需要使用的组件
  }
}

️⚠️ 在使用 components 进行组件注册时,各组件注册名称如上所示。

若对于组件引入和注册还有疑问,我们仍旧建议查阅 Vue 官方文档


样式建议

使用本 UI 框架前,请在 CSS 中开启 border-box

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

IE 8 及以上浏览器都支持此样式。除此之外,还建议设置默认颜色等变量。

  $font-size: 14px;
  $border-radius: 4px;
  $color: #333;
  $theme-color: #70b0f4;
  $disabled-color: #DDD;
  $height: 32px;
  $error-color: #F1453D;

️☕️ 关于本文档中出现的所有 demo ,均为本组件库默认样式。您可以自行添加样式进行覆盖。


属性相关

若使用 :prop 属性传递数据格式为数字、数组、布尔值等非字符串格式时,必须在属性之前携带 : 。否则会当成 String 字符串类型进行传递而造成非预期的效果。具体情况请查阅组件文档。

如下案例中 selected 为一个数组

正确的用法

<gear-collapse :selected.sync="selected">
  ...
</gear-collapse>

错误的用法

<gear-collapse selected="selected">
  ...
</gear-collapse>