首页 > 其他分享 >vant组件库按需加载

vant组件库按需加载

时间:2024-05-23 09:42:43浏览次数:21  
标签:插件 vue vant unplugin components 组件 import 加载

使用 unplugin-vue-components 插件,它可以自动引入组件,并按需引入组件的样式

1、安装插件

npm i unplugin-vue-components -D

2、vite.config.js 文件中配置插件

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
 plugins: [
  vue(),
  Components({
   resolvers: [VantResolver()],
   })
  ],
 resolve: {
  alias: {
   '@': fileURLToPath(new URL('./src', import.meta.url))
   }
  }
})

 

标签:插件,vue,vant,unplugin,components,组件,import,加载
From: https://www.cnblogs.com/aoshuang/p/18207657

相关文章

  • Element-plus按需加载
    1、需安装unplugin-vue-components 和 unplugin-auto-import这两款插件npminstall-Dunplugin-vue-componentsunplugin-auto-import2、修改vite.config.js配置文件import{defineConfig}from'vite'importAutoImportfrom'unplugin-auto-import/vite'impor......
  • Vue搭建移动端h5项目(已开源,附带git地址)Vant+Vue Router+Vuex+axios封装+案例交互+部分
    一、项目介绍以及项目地址             项目介绍:vue2搭建。项目通过amfe-flexible与postcss-pxtorem实现移动端适配;通过Vantui作为项目的组件库;通过Vuex管理数据状态,进行模块化管理;通过VueRouter配置项目路由,进行模块化管理;封装axios进行数据的请求,以及一些页......
  • 开源Blazor UI组件库精选:让你的Blazor项目焕然一新!
    今天给大家推荐一些开源、美观的BlazorUI组件库,这些优秀的开源框架和项目不仅能够帮助开发者们提高开发效率,还能够为他们的项目带来更加丰富的用户体验。注:排名不分先后,都是十分优秀的开源框架和项目​AntDesignBlazorAntDesignBlazor是一个基于Blazor的前端UI组件库,......
  • GeneralUpdate .Net5 WPF、Winfrom、控制台应用自动更新组件
    https://www.bilibili.com/video/BV1aX4y137dd/?vd_source=43d3e66cc2ad46bac54dfb0c6a3a0a23    GeneralUpdate教程2022.4.23 https://www.bilibili.com/video/BV1FT4y1Y7hV/?vd_source=43d3e66cc2ad46bac54dfb0c6a3a0a23   https://mp.weixin.qq.com/s/pR......
  • 全局设置element-ui Dialog组件的close-on-click-modal属性为false
    前言element组件库的Dialog对话框默认可以通过点击modal关闭Dialog,即点击空白处弹框可关闭。属性  importElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'//默认主题//全局修改默认配置,点击空白处不能关闭弹窗ElementUI.Dialog.......
  • 鸿蒙HarmonyOS实战-Stage模型(AbilityStage组件容器)
    ......
  • 封装 ECharts 为 Vue 组件:X-ECharts 简介
    ECharts是一个广泛使用的开源可视化库,它提供了丰富的图表类型和灵活的配置选项,适用于复杂的数据可视化需求。而X-ECharts是一个基于ECharts封装的Vue组件库,旨在提供更简洁的集成方式,同时兼容Vue2和Vue3,使得开发者能够在不同版本的Vue项目中无缝使用ECharts。Eng......
  • 如何实现上拉加载,下拉刷新?
    一、前言下拉刷新和上拉加载这两种交互方式通常出现在移动端中本质上等同于PC网页中的分页,只是交互形式不同开源社区也有很多优秀的解决方案,如iscroll、better-scroll、pulltorefresh.js库等等这些第三方库使用起来非常便捷我们通过原生的方式实现一次上拉加载,下拉刷新,有助......
  • 提升WordPress网站加载速度的8个小技巧
    提升WordPress网站加载速度是至关重要的,它不仅可以提高用户体验,还有助于SEO排名。以下是提升WordPress网站加载速度的8个小技巧,希望能帮助到大家。优化图片:使用适当大小和格式的图片。利用插件(如Smush或EWWWImageOptimizer)对图片进行压缩。启用缓存:使用WordPress缓存......
  • *Unity基础——Transform组件*
    Unity基础——Transform组件一.一些比较重要的点1.首先编辑器面板中的位置信息指的是物体相对于父物体的坐标(本地坐标),如果物体没有父物体,则其父物体可以看作是世界,则该坐标实际上是世界坐标;2.如果在脚本中调用transform组件的position属性,其是一个Vector3类型的对象,指的是......