4.0 KiB
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
$ 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
Vue.component(Button.name, 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
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.
You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
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 'antd/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 viaimport '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.