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

组件中使用

<template>
 <!-- script-setup内引入使用，不需注册-->
 <Button type="primary"> Primary</Button>
 <!-- 在mian.js使用use注册组件 -->
 <a-input placeholder="Basic usage" />
</template>
<script setup>
import { Button } from "ant-design-vue";
</script>

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

赞 (0)

相关推荐

  • 详解vite2.0配置学习(typescript版本)

    详解vite2.0配置学习(typescript版本)

    介绍 尤于溪的原话. vite与 Vue CLI 类似,vite 也是一个提供基本项目脚手架和开发服务器的构建工具. vite基于浏览器原生ES imports的开发服务器.跳过打包这个概念,服务端按需编译返回. vite速度比webpack快10+倍,支持热跟新, 但是出于处于测试阶段. 配置文件也支持热跟新!!! 创建 执行npm init @vitejs/app ,我这里选择的是vue-ts 版本 "vite": "^2.0.0-beta.48" alias别

  • 详解Vite的新体验

    详解Vite的新体验

    什么是Vite?(是前端新玩具) Vite是一个web开发构建工具,它通过本机 ES 模块导入在开发过程中更新代码,达到快速更新的目的. 特点 超快的冷服务器启动 即时的模块更新 真正的按需编译 更小的打包体积 开始使用 Vue用户注意:Vite当前仅适用于Vue3.x.这也意味着您不能使用尚未与Vue 3兼容的库. 安装 npm init vite-app <项目名称> cd <项目名称> npm install npm run dev ## 执行完以上命令,就意味着你的vue3

  • 用vite搭建vue3应用的实现方法

    一,安装 提示: VUE3.0目前还没有官方的翻译文档.但是已经有人翻译了.得到了尤雨溪大佬的点赞,这里附上网址https://v3.cn.vuejs.org/ 1.安装 cli 因为要使用 vue3 必须要求 cli 的版本比较高,必须要高于 4.5.X 所以没有安装的 cli 的就直接安装最新版就行了,已有的可以升级或者卸载后重新安装 最好是全局安装 //全局安装 npm install -g @vue/cli # OR yarn global add @vue/cli //全局卸载 npm

  • Vite和Vue CLI的优劣

    Vue 生态系统中有一个名为 Vite 的新构建工具,它的开发服务器比 Vue CLI 快 10-100 倍. 这是否意味着 Vue CLI 已经过时了?在本文中,我将比较这两种构建工具,并说明它们的优缺点,以便你可以决定哪一种适合你的下一个项目. Vue CLI 概述 大多数 Vue 开发人员都知道,Vue CLI 是使用标准构建工具和最佳实践配置快速建立基于 Vue 的项目的不可或缺的工具. 其主要功能包括: 工程脚手架 带热模块重载的开发服务器 插件系统 用户界面 在本讨论中需要注意的是,

  • vite2.0+vue3移动端项目实战详解

    一.涉及技术点 vite版本 vue3 ts 集成路由 集成vuex 集成axios 配置Vant3 移动端适配 请求代理 二.步骤 vite+ts+vue3只需要一行命令 npm init @vitejs/app my-vue-app --template vue-ts 配置路由 npm install vue-router@4 --save 在src下新建router目录,新建index.ts文件 import { createRouter, createWebHashHistory, Ro

  • 详解Vue3.0 + TypeScript + Vite初体验

    详解Vue3.0 + TypeScript + Vite初体验

    项目创建 npm: $ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev or yarn: $ yarn create vite-app <project-name> $ cd <project-name> $ yarn $ yarn dev 项目结构 main.js 在个人想法上,我觉得createApp()是vue应用的实例,createApp

  • 详解vite+ts快速搭建vue3项目以及介绍相关特性

    vite 尤大在 Vue 3.0 beta 直播中推荐了 vite 的工具,强调:针对Vue单页面组件的无打包开发服务器,可以直接在浏览器运行请求的 vue 文件 很新颖,这篇博客用它来搭建一个 vue3 的项目试试 Vite 是面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具.在生产环境下基于 Rollup 打包 快速冷启动服务器 即时热模块更换(HMR) 真正的按需编译 node >= 10.16.0 搭建 使用 vite 搭建项目 npm init

  • 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

  • React-router 4 按需加载的实现方式及原理详解

    React-router 4 介绍了在router4以后,如何去实现按需加载Component,在router4以前,我们是使用getComponent的的方式来实现按需加载的,router4中,getComponent方法已经被移除,下面就介绍一下react-router4是入围和来实现按需加载的. 1.router3的按需加载方式 route3中实现按需加载只需要按照下面代码的方式实现就可以了. const about = (location, cb) => { require.ensure

  • vue按需加载实例详解

    vue-router配置路由,使用vue的异步组件技术,可以实现按需加载.这种方式下一个组件生成一个js文件 用例: { path: '/promisedemo', name: 'PromiseDemo', component: resolve => require(['../components/PromiseDemo'], resolve) } es提案的import() (推荐) webpack官方文档:webpack中使用import() vue官方文档:路由懒加载(使用import()

  • react-router4按需加载(踩坑填坑)

    react-router4按需加载(踩坑填坑)

    react-router4如何去实现按需加载Component,在router4以前,我们是使用getComponent的方式来实现按需加载的,router4中,getComponent方法已经被移除,网上有好几种方案大多都解决的不太彻底,下面我说一下我的方案: 一:创建asyncComponent.js import React, { Component } from "react"; export default function asyncComponent(importComp

  • react脚手架如何配置less和ant按需加载的方法步骤

    前言 create-react-app是由React官方提供并推荐使用构建新的React单页面应用程序的最佳方式,其构建的项目默认是不支持less的,需要我们手动集成 一.react脚手架搭建 1.先全局安装create-react-app(提前需要安装node) npm install -g create-react-app 2.然后通过create-react-app创建项目my-app create-react-app my-app 3.最后通过cd进入项目文件夹并启动 cd my-app

  • 详解在create-react-app使用less与antd按需加载

    使用antd按需加载 使用react-app-rewired对 create-react-app 的默认配置进行自定义 1.yarn add react-app-rewired --dev /* package.json */ "scripts": { - "start": "react-scripts start", + "start": "react-app-rewired start", - &quo

  • vue3如何按需加载第三方组件库详解

    vue3如何按需加载第三方组件库详解

    前言 以Element Plus为例,配置按需加载组件和样式. 环境 vue3.0.5 vite2.3.3 安装 Element Plus yarn add element-plus # OR npm install element-plus --save 完整引入 import { createApp } from 'vue' import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.c

  • 探索angularjs+requirejs全面实现按需加载的套路

    在进行有一定规模的项目时,通常希望实现以下目标:1.支持复杂的页面逻辑(根据业务规则动态展现内容,例如:权限,数据状态等):2.坚持前后端分离的基本原则(不分离的时候,可以在后端用模版引擎直接生成好页面):3.页面加载时间短(业务逻辑复杂就需要引用第三方的库,但很可能加载的库和用户本次操作没关系):4,还要代码好维护(加入新的逻辑时,影响的文件尽量少). 想同时实现这些目标,就必须有一套按需加载的机制,页面上展现的内容和所有需要依赖的文件,都可以根据业务逻辑需要按需加载.最近都是基于angula

  • 自定义require函数让浏览器按需加载Js文件

    前言 本文介绍的是自定义require函数让浏览器实现按需加载Js文件,那到底要怎么自己写一个按需加载的库呢 为了实现按需加载: //这是我们要实现的功能,require('str.js')时加载str.js文件,并创建一个叫str对象,等加载完毕之后执行str对象的ready方法里的函数. var str = require('str.js'); str.ready(show); //要执行的函数 function show(res){ console.log(res); } //str.js

  • jQuery按需加载轮播图(web前端性能优化)

    jQuery按需加载轮播图(web前端性能优化)

    引言 关于幻灯轮播图,想必大家都不陌生,尤其是基于 jQuery 的,插件.代码网上一搜一大堆,但是真正符合自己需求的几乎没有,所以我要打造一个符合自身需求,经得起广大网民考验的 jQuery 轮播图! 思路 为什么说网上其他一些轮播图不符合我的要求?我的需求又是什么呢? 现在网上可以找到的多数幻灯轮播图的 jQuery 插件的作法是,先把图片和链接的 HTML 写好,然后控制隐藏和显示来轮流展示当前的幻灯图片.但是对用户而言,我们始终只是看到当前的一张图片,那其他几张隐藏的图片为什么要事先加载

随机推荐