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

MySQL 8.0.15 installation and configuration tutorial under Win10

What I have been learning recently involves knowl...

Solution to mysql ERROR 1045 (28000) problem

I encountered mysql ERROR 1045 and spent a long t...

XHTML introductory tutorial: Application of table tags

<br />Table is an awkward tag in XHTML, so y...

About if contains comma expression in JavaScript

Sometimes you will see English commas ",&quo...

Detailed explanation of the use of router-view components in Vue

When developing a Vue project, you often need to ...

Analysis of MySQL cumulative aggregation principle and usage examples

This article uses examples to illustrate the prin...

Button is stretched on both sides in IE

When you write buttons (input, button), you will f...

W3C Tutorial (13): W3C WSDL Activities

Web Services are concerned with application-to-ap...

HTML 5.1 learning: 14 new features and application examples

Preface As we all know, HTML5 belongs to the Worl...

mysql5.5 installation graphic tutorial under win7

MySQL installation is relatively simple, usually ...

Nginx+FastDFS to build an image server

Installation Environment Centos Environment Depen...

Examples of using HTML list tags dl, ul, ol

Copy code The code is as follows: <!-- List ta...