vite2.x implements on-demand loading of ant-design-vue@next components

vite2.x implements on-demand loading of ant-design-vue@next components

1. Use version

  • vite:2.0
  • ant-design-vue: 2.0.0-rc.8
  • vue:3.0.5

2. Install the vite plugin

yarn add vite-plugin-style-import -D or npm i vite-plugin-style-import -D

Plugin repository address: github

3.vite.config.js configuration

import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import';
/**
 * @type {import('vite').UserConfig}
 */
export default {
 plugins: [
  vue(),
  styleImport({
   libs: [{
    libraryName: 'ant-design-vue',
    esModule: true,
    resolveStyle: (name) => {
     return `ant-design-vue/es/${name}/style/css`;
    },
   }]
  })
 ]
}

4. Test run

main.js

import { createApp } from 'vue'
import App from './App.vue'
import { Input } from 'ant-design-vue';
const app = createApp(App)
app.use(Input)
app.mount('#app')

Used in components

<template>
 <!-- Imported and used in script-setup, no registration required-->
 <Button type="primary"> Primary</Button>
 <!-- Use use to register components in main.js -->
 <a-input placeholder="Basic usage" />
</template>
<script setup>
import { Button } from "ant-design-vue";
</script>

This is the end of this article about how to implement on-demand loading of ant-design-vue@next components in vite2.x. For more relevant vite2.x on-demand loading 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:
  • Implementation of Vue 3.x project based on Vite2.x
  • Detailed explanation of vite2.0+vue3 mobile project
  • Detailed explanation of vite+ts to quickly build vue3 projects and introduce related features
  • How to use vite to build vue3 application
  • Detailed explanation of Vue3.0 + TypeScript + Vite first experience
  • Pros and Cons of Vite and Vue CLI
  • Steps to build the vite+vue3+element-plus project

<<:  Related commands to completely uninstall nginx under ubuntu16.04

>>:  MySQL uses variables to implement various sorting

Recommend

The benefits and examples of placing the site map at the bottom of the web page

In the past, almost every website had a sitemap p...

Summary of commonly used CSS encapsulation methods

1. pc-reset PC style initialization /* normalize....

JS achieves five-star praise effect

Use JS to implement object-oriented methods to ac...

Detailed tutorial on installing ElasticSearch 6.4.1 on CentOS7

1. Download the ElasticSearch 6.4.1 installation ...

Ubuntu 20.04 connects to wifi (2 methods)

I recently installed Ubuntu 20.04 and found that ...

Detailed explanation of the JVM series memory model

Table of contents 1. Memory model and runtime dat...

Detailed explanation of Linux rpm and yum commands and usage

RPM package management A packaging and installati...

Analyze the compilation and burning of Linux kernel and device tree

Table of contents 1. Prepare materials 2. Downloa...

18 Amazing Connections Between Interaction Design and Psychology

Designers need to understand psychology reading n...

21 MySQL standardization and optimization best practices!

Preface Every good habit is a treasure. This arti...

Summary of problems encountered in the implementation of Vue plug-ins

Table of contents Scene Introduction Plugin Imple...