2.7 KiB

Raw Blame History

Getting Started

Ant Design Vue is dedicated to providing a good development experience for programmers. Make sure that you had installed Node.js(> v8.9) correctly.

Before delving into Ant Design Vue, a good knowledge base of Vue and JavaScript ES2015 is needed.

Playground

The following CodeSandbox demo is the simplest use case, and it's also a good habit to fork this demo to provide a re-producible demo while reporting a bug.

Import ant-design-vue

1. Installation

vue-cli

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

2. Create a New Project

A new project can be created using CLI tools.

$ vue create antd-demo

And, setup your vue project configuration.

3. Use antd's Components

Install

$ npm i --save ant-design-vue@4.x

Component Registration

If you use Vue's default template syntax, you need to register components before you can use them. There are three ways to register components:

Global Registration All Components

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/reset.css';

const app = createApp(App);

app.use(Antd).mount('#app');

The above imports Antd entirely. Note that CSS file needs to be imported separately.

Global Registration Some Components

import { createApp } from 'vue';
import { Button, message } from 'ant-design-vue';
import App from './App';

const app = createApp(App);

/* Automatically register components under Button, such as Button.Group */
app.use(Button).mount('#app');

app.config.globalProperties.$message = message;

Local Registration

In this way, component sub-components, such as Button and ButtonGroup, need to be registered separately, and they are only valid in the current component after registration. Therefore, we recommend using the above two methods.

<template>
  <a-button>Add</a-button>
</template>
<script>
  import { Button } from 'ant-design-vue';
  const ButtonGroup = Button.Group;

  export default {
    components: {
      AButton: Button,
      AButtonGroup: ButtonGroup,
    },
  };
</script>

4. Component list

Component list

Import on Demand

ant-design-vue supports tree shaking of ES modules, so using import { Button } from 'ant-design-vue'; would drop js code you didn't use.

Customization

Customize Theme

2.7 KiB Raw Blame History