全部产品
云市场
云游戏

使用指南

更新时间:2019-09-26 18:35:17

在 Kylin 工程下,可以看到 package.json 中已经存在了 @alipay/antui-vue 的依赖。要使用 Ant UI 前端组件,您可以通过以下方式之一:

  • 在 Kylin 工程中使用该组件,按照 dependency 的方式导入,因为 Kylin 工程脚手架包含了这该组件的依赖。具体方式,参见本文的 Kylin 部分。
  • 在别的工程中使用,通过 ESModule 的方式来导入组件。具体方式,参见本文的 ESModule 部分。

此外,每个组件还会提供 API 文档,因为对于一个标准的 Kylin 组件, propslotmethodevent 是提供的接口。例如,要使用 AButton,可以定制 props 中的 size,来选择这个按钮是大是小,可以配置 slots 中的 icon 来自定义按钮样式,可以通过 events 中的 click 事件来获得点击事件。具体信息,参考每个组件的 API 文档部分。

Kylin

在 Kylin 工程的 .vue 组件文件下,支持特殊语法 <dependency> ,可以使用如下方式注册组件依赖:

  1. <dependency component="{ Notice }" src="@alipay/antui-vue" ></dependency>

上述语法表示,在当前 .vue 文件内,可以在 template 模板中使用 Notice 组件。

ESModule

在其他工程结构中,需要确保以下几件事:

loader

开发者需要能够加载 .vue 文件,比如在 webpack 下可以通过 vue-loader

js

在支持 .vue 文件加载后,就像普通组件一样使用:

  1. import { Notice } from '@alipay/antui-vue';
  2. Vue.component(Notice.name, Notice);