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

Use vue-cli@3

We provide an Ant Design Vue plugin for vue-cli@3, which you can use to quickly build an Ant Design Vue-based project.

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

$ npm i --save ant-design-vue

Fully import

import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false;

Vue.use(Antd);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});

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

Only import the components you need

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

Vue.config.productionTip = false;

/* v1.1.2 */
Vue.component(Button.name, Button);
Vue.component(Button.Group.name, Button.Group);

/* v1.1.3+ Automatically register components under Button, such as Button.Group */
Vue.use(Button);

Vue.prototype.$message = message;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});

All the components in antd are listed in the sidebar.

4. Component list

Component list

Compatibility

Ant Design Vue supports all the modern browsers and IE9+.

You need to provide es5-shim and es6-shim and other polyfills for IE browsers.

If you are using babel, we strongly recommend using babel-polyfill and babel-plugin-transform-runtime instead of those two shims.

Please avoid using both the babel and shim methods at the same time.

Import on Demand

If you see logs like below screenshot, you might be importing all components by writing import { Button } from 'ant-design-vue';. This will affect your app's network performance.

However, we can import individual components on demand:

import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/lib/button/style'; // or ant-design-vue/lib/button/style/css for css format file

We strongly recommend using babel-plugin-import, which can convert the following code to the 'ant-design-vue/lib/xxx' way:

import { Button } from 'ant-design-vue';

And this plugin can load styles too, read usage for more details.

FYI, babel-plugin-import's style option will importing some global reset styles, don't use it if you don't need those styles. You can import styles manually via import 'ant-design-vue/dist/antd.css' and override the global reset styles.

Customization

Tips

You can use any npm modules.
Although Vue's official recommended template to write components, JSX is a better choice for complex components.

4.2 KiB Raw Blame History