在Vue中安装，新建一个Ant Design案例

---

引入ant-design-vue #

1. 安装脚手架工具 #

vue-cli

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

2. 创建一个项目 #

使用命令行进行初始化。

$ vue create antd-demo

并配置项目。

若安装缓慢报错，可尝试用 cnpm 或别的镜像源自行安装：rm -rf node_modules && cnpm install。

3. 使用组件 #

$ npm i --save ant-design-vue

完整引入

import Vue from 'vue'import Antd from 'ant-design-vue'import App from './App'import 'ant-design-vue/dist/antd.css'Vue.config.productionTip = falseVue.use(Antd)/* eslint-disable no-new */new Vue({  el: '#app',  components: { App },  template: '<App/>'})

以上代码便完成了 Antd 的引入。需要注意的是，样式文件需要单独引入。

局部导入组件

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+ 自动注册Button下组件，如Button.Group */Vue.use(Button)Vue.prototype.$message = message/* eslint-disable no-new */new Vue({ el: '#app', components: { App }, template: '<App/>'})

以上代码便完成了 Antd 的引入。需要注意的是，样式文件需要单独引入。

局部导入组件

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+ 自动注册Button下组件，如Button.Group */Vue.use(Button)Vue.prototype.$message = message/* eslint-disable no-new */new Vue({  el: '#app',  components: { App },  template: '<App/>'})