Vue3 (Part 2) Integrating Ant Design Vue

Vue3 (Part 2) Integrating Ant Design Vue

In the previous article, we introduced how to create a Vue CLI project using Vue3 (Part 1). Next, we will continue to expand the content of the following article based on the previous article.

1. Integrate Ant Design Vue

SQL:

npm install [email protected] --save

compatibility:

Ant Design Vue 2.x supports all modern browsers.

If you need to support IE9+ , you can use Ant Design Vue 1.x & Vue 2.x

For IE series browsers, support for Polyfills such as es5-shim and es6-shim is required.

2. Use of components

Official website address: https://2x.antdv.com/docs/vue/getting-started-cn

1. Full citation

Modify the content in main.ts as follows:

ts
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App.vue';
import 'ant-design-vue/dist/antd.css';
import router from './router';
import store from './store';
//The advantage is that it is easy to develop, but the disadvantage is that the file will be larger when packaged (but it does not affect anything)
createApp(App).use(store).use(router).use(Antd).mount('#app')

2. Component reference

After the complete import, we can use the components happily. If you have used Vue2.0 or Element UI before, it will be relatively faster.

3. Component Usage Examples

Let's add a button to the home page, as shown below:

1. We make changes on the home page

HTML:

<template>
  <div class="home">
    <a-button type="primary" danger>Primary</a-button>
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

export default defineComponent({
  name: 'Home',
  components:
    HelloWorld,
  },
});
</script>

2. Restart the service to see the effect

Double-click server to start it and view the results as shown below:

IV. Conclusion

This is the end of this article about Vue3 integration with Ant Design Vue . For more relevant Vue3 integration with Ant Design Vue content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Using Vue3 (Part 1) Creating a Vue CLI Project
  • A brief discussion on Vue3 father-son value transfer
  • Detailed explanation of non-parent-child component communication in Vue3
  • Detailed explanation of two points to note in vue3: setup
  • Analysis of the difference between emits and attrs in Vue3
  • The whole process record of vue3 recursive component encapsulation

<<:  Sqoop export map100% reduce0% stuck in various reasons and solutions

>>:  HTML table tag tutorial (35): cross-column attribute COLSPAN

Recommend

The difference and usage between div and span

Table of contents 1. Differences and characterist...

Use of Vue filters and custom instructions

Table of contents Filters 01.What is 02. How to d...

How to write the Nofollow tag and how to use it

The "nofollow" tag was proposed by Goog...

Learning to build React scaffolding

1. Complexity of front-end engineering If we are ...

Sample code for implementing dark mode with CSS variables

Recently, WeChat was forced by Apple to develop a...

A brief discussion on the differences between FTP, FTPS and SFTP

Table of contents Introduction to FTP, FTPS and S...

A brief analysis of MySQL's lru linked list

1. Briefly describe the traditional LRU linked li...

How to modify create-react-app's configuration without using eject

1. Why is eject not recommended? 1. What changes ...

Layui implements sample code for multi-condition query

I recently made a file system and found that ther...

A brief discussion on the principle of React two-way data binding

Table of contents What is two-way data binding Im...

React Fiber structure creation steps

Table of contents React Fiber Creation 1. Before ...