All Products
Search
Document Center

User guide

Last Updated: May 25, 2021

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.

 
  1. <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.

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