使用指南
在 Kylin 工程下,可以看到 package.json
中已经存在了 @alipay/antui-vue
的依赖。
要使用 Ant UI 前端组件,您可以通过以下方式之一:
在 Kylin 工程中使用该组件,按照
dependency
的方式导入,因为 Kylin 工程脚手架包含了这该组件的依赖。具体方式,参见本文的 Kylin 部分。在别的工程中使用,通过 ESModule 的方式来导入组件。具体方式,参见本文的 ESModule 部分。
此外,每个组件还会提供 API 文档,因为对于一个标准的 Kylin 组件, prop
、slot
、method
、event
是提供的接口。例如,要使用 AButton,可以定制 props
中的 size
,来选择这个按钮是大是小,可以配置 slots
中的 icon
来自定义按钮样式,可以通过 events
中的 click
事件来获得点击事件。具体信息,参考每个组件的 API 文档部分。
Kylin
在 Kylin 工程的 .vue
组件文件下,支持特殊语法 <dependency>
,可以使用如下方式注册组件依赖:
<dependency component="{ Notice }" src="@alipay/antui-vue" ></dependency>
上述语法表示,在当前 .vue
文件内,可以在 template
模板中使用 Notice
组件。
ESModule
在其他工程结构中,需要确保以下几件事:
loader
开发者需要能够加载 .vue
文件,比如在 webpack
下可以通过 vue-loader。
js
在支持 .vue
文件加载后,就像普通组件一样使用:
import { Notice } from '@alipay/antui-vue';
Vue.component(Notice.name, Notice);