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

Solve the problem of Docker starting Elasticsearch7.x and reporting an error

Using the Docker run command docker run -d -p 920...

32 Typical Column/Grid-Based Websites

If you’re looking for inspiration for columnar web...

MySQL Optimization Summary - Total Number of Query Entries

1. COUNT(*) and COUNT(COL) COUNT(*) usually perfo...

jQuery plugin to implement minesweeper game (3)

This article shares the third article on how to u...

Diagram of the process of implementing direction proxy through nginx

This article mainly introduces the process of imp...

XHTML: Frame structure tag

Frame structure tag <frameset></frameset...

How to set up URL link in Nginx server

For websites with an architecture like LNMP, they...

JavaScript to achieve the idea of ​​​​snake game

The implementation idea of ​​the javascript game ...

JavaScript+html implements random QR code verification on front-end pages

Share the cool front-end page random QR code veri...

Native JS music player

This article example shares the specific code of ...

Detailed introduction to deploying k8s cluster on centos7 system

Table of contents 1 Version and planning 1.1 Vers...

Implementation of Single Div drawing techniques in CSS

You can often see articles about CSS drawing, suc...

Zabbix's psk encryption combined with zabbix_get value

Since Zabbix version 3.0, it has supported encryp...