Ant Design is a great front-end component library with many basic components that can greatly improve our development efficiency

Here is the official document, which has been very comprehensive and detailed, and many of the questions you have encountered can be answered in the above

Now that we have created a VUE project using the VUe-CLI 3 tool, how do we introduce Ant Design into the project?

I’ll start with the directory structure generated by default for VUE-CLI 3, and refer to my other article on how to use VUe-CLI 3

+ demo + node_modules + public - favicon.ico - index.html + SRC (where we write our own files) + Assets (store resource files) + Components (store public components) + router.js (Route management: router) + store.js (state management: Vuex) + views (Store view component) -app.vue (page entry file) -main.js (program entry file) -package. json (project configuration file) -package-lock. json (project configuration file) - Babel.config.js (Babel configuration file) - readme.md (project description document) -... (Other configuration files)Copy the code


1. Install Ant Design

NPM is Node’s package management tool that allows you to install Ant Design

With the –save option, you can also write the configuration to the Dependencies field of package.json (production environment dependencies)

npm install --save ant-design-vue
Copy the code


2. Introduce Ant Design

There are two ways to introduce Ant Design in Vue, full and partial, which are described below

(1) Introduction of all

By importing and registering all components in main.js, you can use all components directly in other pages

// main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// New code: introduce all components and styles
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

// Add code to register all components
Vue.use(Antd)

new Vue({
  router,
  store,
  render: h= > h(App)
}).$mount('#app')
Copy the code

It is not a good idea to import all components, whether they are used or not, in this way

(2) Local introduction

Import and register specific components in main.js, and only use specific components in other pages

// main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// New code: introduces specific components and styles
import {
  Button
} from 'ant-design-vue'
import 'ant-design-vue/lib/button/style'

// Add code to register specific components
Vue.component(Button.name, Button)

new Vue({
  router,
  store,
  render: h= > h(App)
}).$mount('#app')
Copy the code

With this import approach, you can ensure that only the required components are imported (on demand)

However, it is too cumbersome to manually import the corresponding style file for each component you import


The babel-plugin-import plug-in can assist in this task by first installing the babel-plugin-import plug-in

Add the –save-dev option and write the configuration to the devDependencies field of package.json (development environment dependencies)

npm install --save-dev babel-plugin-import
Copy the code

Then configure the plug-in in babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'].// Add new code
  plugins: [['import',
      { libraryName: 'ant-design-vue'.libraryDirectory: 'es'.style: true}}]]Copy the code

The components are then imported as needed in main.js

// main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// New code: introduces specific components
// The corresponding style files will be automatically imported. There is no need to manually import one by one
import {
  Button
} from 'ant-design-vue'

// Add code to register specific components
Vue.component(Button.name, Button)

new Vue({
  router,
  store,
  render: h= > h(App)
}).$mount('#app')
Copy the code

Finally, remember to restart the application with NPM Run Serve so that specific components can be used in other pages


Note that if you configure Less when creating the project using VUe-CLI 3, you may get the following error when running the application:

Inline JavaScript is not enabled. Is it set in your options?
Copy the code

This is because the default Webpack configuration for less-loader is not appropriate, so we need to change the configuration

Add the following configuration items to the project configuration file vue.config.js in the root directory (if you don’t have this file, create one yourself)

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true}}}}Copy the code


3. Use Ant Design

After installing and introducing Ant Design, we are ready to use components from Ant Design in our pages

<template>
  <div>
    <a-button type="primary" @click="handleClick">Primary</a-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick: function (e) {
      console.log('click', e)
    }
  }
}
</script>
Copy the code

If you see a blue button appear on the page, the configuration is successful

Now you can enjoy the efficient development experience of Ant Design