Pit events -Antd is not defined

background

Error Antd is not defined when trying to use Ant Design of Vue and trying to switch to global import after using babel-plugin-import on demand according to the official documentation

Import the configuration mode as required

1. Install the plug-in

// install the babel-plugin-import plugin CNPM I babel-plugin-import -dCopy the code

2. Configure the babel.config.js file

module.exports = { presets: ['@vue/cli-plugin-babel/preset'], // Since vue/ CLI3 is used, the plugin information needs to be added to babel.config.js file // Then just introduce the module from ant-design-vue, There is no need to introduce styles separately. Equivalent to the following manual introduction. plugins: [['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }]] }Copy the code

3. Import main.js files as required

import { Button } from 'ant-design-vue' Vue.use(Button)
Copy the code

4. You can use the Button component directly within the component

<! <a-button type="primary"> </a-button>Copy the code

Global Import Configuration

1. Import the main.js file globally

Import Antd from 'ant-design-vue' import 'ant-design-vue/dist/antd. CSS 'import vue. Use (Antd)Copy the code

import Antd from 'ant-design-vue'
Copy the code

import Antd from 'ant-design-vue/es'
Copy the code