Ant Design Vue

官网

vue2

全局引入

项目为vue2时(安装指定版本)
npm i --save ant-design-vue@1.7.2
1
2

main.js引入

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
1
2
3

局部引入

npm install ant-design-vue --save

1
2

第一步：在src内创建一个资源文件夹libs，专门装所有组件资源。

第二步：在libs文件夹内新建一个antd文件夹，存放Ant Design of Vue组件的配置文件index.js，具体配置如下。

import 'ant-design-vue/dist/antd.css'
import { Drawer, Collapse, Menu, Dropdown,Modal,Button,message} from 'ant-design-vue'
export default {
    install (app) {
      [
        Drawer,
        Collapse,
        Dropdown,
        Menu, 
        Modal,
        Button
      ].forEach(c => app.component(c.displayName || c.name, c))
      //使用message需要配置这一步
      app.prototype.$message = message;
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

第三步：在libs文件夹下的index.js内引入所有库文件

import antd from './antd'
export default {
  antd,
  install(app) {
    app.use(antd)
  }
}
1
2
3
4
5
6
7
8

第四步：在main.js内引入libs：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
 
//引入libs
import libs from '@/libs'
Vue.use(libs)
 
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

第五步：修改babel.config.js文件，配置 babel-plugin-import

安装一下 babel-plugin-import插件
npm i babel-plugin-import -D
1
2

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
  ]
}
1
2
3
4
5
6
7
8

然后需要对应插件引入就行 如果使用layout最好全局引入hh
1

vue3

npm install ant-design-vue --save

1
2

main.ts/js

import { DatePicker } from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'
 
app.use(DatePicker);
1
2
3
4