热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

vite2.x实现按需加载ant-design-vue@next组件的方法

这篇文章主要介绍了vite2.x实现按需加载ant-design-vue@next组件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

1.使用版本

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

2.安装vite插件

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

插件仓库地址:github

3.vite.config.js配置

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.测试运行

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')

组件中使用



到此这篇关于vite2.x实现按需加载ant-design-vue@next组件的方法的文章就介绍到这了,更多相关vite2.x 按需加载内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持! 


推荐阅读
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 本文详细探讨了Xshell6评估版到期后无法使用的常见问题,并提供了有效的解决方案,包括如何合法购买授权以继续使用。 ... [详细]
  • 前端开发中的代码注释实践与规范
    本文探讨了前端开发过程中代码注释的重要性,不仅有助于个人清晰地回顾自己的编程思路,还能促进团队成员之间的有效沟通。文章将详细介绍HTML、CSS及JavaScript中的注释使用方法,并提出一套实用的注释规范。 ... [详细]
  • 本文将详细介绍如何在Bootstrap 5中使用五种不同的表单控件样式,包括输入框、选择器和文本区域等元素。 ... [详细]
  • Node.js 入门指南(一)
    本文介绍了Node.js的安装步骤、如何创建第一个应用程序、NPM的基本使用以及处理回调函数的方法。通过实际操作示例,帮助初学者快速掌握Node.js的基础知识。 ... [详细]
  • Vue 项目构建与部署指南
    本文将指导您完成Vue项目的构建和部署过程,包括环境搭建、项目初始化及配置、以及最终的部署步骤。 ... [详细]
  • 利用 Jest 和 Supertest 实现接口测试的全面指南
    本文深入探讨了如何使用 Jest 和 Supertest 进行接口测试,通过实际案例详细解析了测试环境的搭建、测试用例的编写以及异步测试的处理方法。 ... [详细]
  • 本文探讨了前端包管理器的核心功能,包括注册机制、文件存储、上传下载、以及依赖分析等关键特性,并介绍了几种流行的前端包管理工具。 ... [详细]
  • 了解如何快速搭建属于自己的个人博客,无需编程基础,适合Mac和Windows用户。通过本文,您将学会使用GitHub Pages和Hexo构建一个完全自主的在线空间。 ... [详细]
  • 如何使用Ionic3框架创建首个混合开发应用
    混合开发是指结合原生(Native)与网页(Web)技术进行移动应用开发的方法。本文将详细介绍如何利用Ionic3这一流行的混合开发框架,从环境搭建到创建并运行首个应用的全过程。 ... [详细]
  • 使用 Angular CLI 快速构建 Web 前端项目
    本文详细介绍如何利用 Angular CLI 的常用命令来搭建和管理 Angular 项目,包括项目创建、依赖管理、组件生成等核心操作。 ... [详细]
  • 本文探讨了天才与疯子之间的微妙界限,介绍了如何利用巨人的工具提升自我,以及如何通过科学决策、数据洞察和智慧的尺度来指导我们的生活和工作。 ... [详细]
  • 深入解析Spring Boot自动配置机制
    本文旨在深入探讨Spring Boot的自动配置机制,特别是如何利用配置文件进行有效的设置。通过实例分析,如Http编码自动配置,我们将揭示配置项的具体作用及其背后的实现逻辑。 ... [详细]
  • 传送门A-Registration#include#definelllonglongusingnamespacestd;chars[15],t[15]; ... [详细]
  • CentOS 转向引发争议,联合创始人推出 Rocky Linux
    CentOS 转向 CentOS Stream 引发用户不满,其联合创始人 Gregory Kurtzer 推出新的社区项目 Rocky Linux,旨在延续 CentOS 的精神。 ... [详细]
author-avatar
天涯s1_278
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有