How to introduce Ant Design in Vue3

First introduce the directory structure generated by vue-cli 3 by default

+ demo
    + node_modules（存放第三方模块）
    + public（存放静态文件）
        - favicon.ico（图标）
        - index.html （页面模板）
    + src（我们自己写的文件一般放在这个文件夹下）
        + assets（存放资源文件）
        + components（存放公共组件）
        + router.js（路由管理：Router）
        + store.js （状态管理：Vuex）
        + views（存放视图组件）
        - App.vue（页面入口文件）
        - main.js（程序入口文件）
    - package.json（项目配置文件）
    - package-lock.json（项目配置文件）
    - babel.config.js（babel 配置文件）
    - README.md（项目说明文档）
    - ...（其它配置文件）

1. Install Ant Design

npm is Node’s package management tool, we can install Ant Design through npm

With the --save option, the configuration can be written to the dependencies field of package.json (production environment dependency) at the same time

npm install --save ant-design-vue

2. Introducing Ant Design

Introduced in Vue Ant Design has two methods, namely full introduction and partial introduction. The following will introduce them one by one

(1) All introduction

Introduce and register all components in main.js. 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'
 
// 新增代码：引入全部组件及样式
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
 
// 新增代码：注册全部组件
Vue.use(Antd)
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

With this introduction method, all components will be loaded regardless of whether they are used, which is obviously not a good way

(2) Partial introduction

Introduce and register specific components in main.js, and only specific components can be used in other pages

// main.js
 
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
 
// 新增代码：引入特定组件及样式
import {
  Button
} from 'ant-design-vue'
import 'ant-design-vue/lib/button/style'
 
// 新增代码：注册特定组件
Vue.component(Button.name, Button)
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Using this introduction method, you can ensure that only the required components are introduced (introduction on demand) )

But every time a component is introduced, its corresponding style file must be manually introduced at the same time, which is too troublesome

babel-plugin-import plug-in can assist in completing this work, first install babel- plugin-import plug-in

Add the --save-dev option, and write the configuration into the devDependencies field of package.json (development environment dependency)

npm install --save-dev babel-plugin-import

Then configure in babel.config.js Plug-in

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 新增代码
  plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }
    ]
  ]
}

Then introduce components on demand in main.js

// main.js

// main.js
 
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
 
// 新增代码：引入特定组件
// 此时会自动引入对应的样式文件，无需再手动逐一引入
import {
  Button
} from 'ant-design-vue'
 
// 新增代码：注册特定组件
Vue.component(Button.name, Button)
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Finally remember to use npm run serve to restart the application, you can use it in other pages Use specific components

Note that if you configure Less when creating a 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?

This is because Webpack’s default configuration for Less-loader is inappropriate, so we need to modify the configuration

at the root Add the following configuration items to the project configuration file vue.config.js in the directory (if there is no such file, create one yourself)

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

3. Use Ant Design

to install and introduce Ant After Design, we can use the components in Ant Design on the page

<template>
  <div>
    <a-button type="primary" @click="handleClick">Primary</a-button>
  </div>
</template>
 
<script>
export default {
  methods: {
    handleClick: function (e) {
      console.log(&#39;click&#39;, e)
    }
  }
}
</script>

At this time, if you can see a blue button appearing on the page, it means that the configuration has been successful

The above is the detailed content of How to introduce Ant Design in Vue3. For more information, please follow other related articles on the PHP Chinese website!