In the Kylin project, package.json
contains the @alipay/antui-vue
dependencies. You can use either of the following methods to use an Ant UI front-end component.
- Use this component in the Kylin project. Import it as a
dependency
, because the Kylin project’s scaffold includes dependencies of this component. For more information, see Kylin. - Use this component in other projects. Import it through ESModule. For more information, see ESModule.
In addition, the API description is provided for each component because the prop
, slot
, method
, and event
APIs are provided for a standard Kylin component. For example, to use AButton, you can define the button size by using size
in props
and the button pattern by using icon
in slots
, and obtain tapping events based on tap
in events
. For specific information, see the API description for each component.
Kylin
The .vue
component folder of the Kylin project supports the special syntax <dependency>
. Use the following method to register component dependencies.
<dependency component="{ Notice }" src="@alipay/antui-vue" ></dependency>
The preceding syntax indicates that the Notice
component can be used in template
of the current .vue
file.
ESModule
In other project structures, ensure the following:
loader
The .vue
file can be loaded. For example, the file can be loaded by using vue-loader in webpack
.
js
The loaded .vue
file is used as a normal component.
import { Notice } from '@alipay/antui-vue';
Vue.component(Notice.name, Notice);