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!