Vant4在Vue3.3中如何按需导入组件和样式

前言

最近我在Vue 3.3的项目中对Vant4做按需导入时,尽管按照Vant4的官方指南进行操作,但样式仍然无法正确加载。经过深入研究和多篇文章的比较,我终于找到了在Vue3中如何正确的按需导入Vant 4组件和样式的方法。由于Vue3.3和Vant4相对较新,相关资料可能还不够完善,因此我认为分享这个经验非常重要。希望这篇文章能帮助到同样遇到此问题的开发者们,并推动相关技术的进步。

我的环境

依赖名称版本
pnpm8.14.0
Node16.20.1
Vue33.3.11
Vite5.0.8

目录

一、安装
二、配置 vite.config.ts
1、按需导入组件
2、按需导入UI组件样式
3、完整代码
三、解决 Vant 375 设计尺寸问题
四、这个unplugin-vue-components跟以往的按需导入有何区别?

一、安装

1、vant

pnpm add vant  // 默认为vant4
// 或 npm i vant  
//    yarn add vant

2、自动按需导入UI库样式的插件

pnpm add vite-plugin-style-import@2.0.0
// 或 npm i vite-plugin-style-import@2.0.0
//    yarn add vite-plugin-style-import@2.0.0

3、自动导入组件插件

pnpm add unplugin-vue-components/vite@0.26.0
// 或 npm i unplugin-vue-components/vite@0.26.0
//    yarn add unplugin-vue-components/vite@0.26.0

二、配置 vite.config.ts

vite.config.ts

1、按需导入组件的插件 unplugin-vue-components

作用:全局自动注册项目中的公共组件或UI组件,组件中需要使用到的公共组件或UI组件无需import手动导入,直接使用即可。然后它会在根目录自动生成components.d.ts,里面保存了我们使用了哪些组件。
注意:仅限.vue后缀的文件。如果是.ts或.js结尾的仍需在顶部import导入。

import Components from 'unplugin-vue-components/vite' 
import { VantResolver } from 'unplugin-vue-components/resolvers'  // 取出vant组件按需导入方法export default defineConfig({plugins: [Components({dts: true, // 允许项目根目录下的components.d.ts执行resolvers: [VantResolver()], // 自动按需导入UI组件}),]
})

例如:我用了van-button,它会自动将van-button这个组件帮我们注册到components.d.ts中。

home.vue

<template><van-button>按钮</van-button>
</template>

components.d.ts 代码如下:

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}declare module 'vue' {export interface GlobalComponents {VanButton: typeof import('vant/es')['Button']}
}

既然它帮我们把用到的组件保存在这里,就需要为它配置路径。

打开tsconfig.json,加入指定路径

 "include": ["./components.d.ts",]

2、自动按需导入UI样式的插件 vite-plugin-style-import

现在页面可以使用vant组件了,但是没有UI自带的样式,所以需要再配置UI库的样式路径。

import { createStyleImportPlugin } from 'vite-plugin-style-import'
export default defineConfig({plugins: [createStyleImportPlugin({resolves: [{libraryName: 'vant',libraryNameChangeCase: 'pascalCase',resolveStyle: name => {return `vant/es/${name.toLowerCase()}/index.css`},},],}),	]
}

说明:vant/es指定的路径是node_modules中的vant依赖包下的路径
在这里插入图片描述

3、完整代码

import Components from 'unplugin-vue-components/vite'  // 自动按需导入组件
import { VantResolver } from 'unplugin-vue-components/resolvers'  // 取出vant的按需导入组件
import { createStyleImportPlugin } from 'vite-plugin-style-import' // 用于配置自动按需导入vant组件库的样式export default defineConfig({plugins: [// 自动按需导入样式createStyleImportPlugin({resolves: [{libraryName: 'vant',libraryNameChangeCase: 'pascalCase',resolveStyle: name => {return `vant/es/${name.toLowerCase()}/index.css`},},],}),	// 自动按需导入组件Components({dts: true, resolvers: [VantResolver()], }),]
})

三、解决 Vant 375 设计尺寸问题

  • Vant自带是375尺寸的,如果我们是750最后插件帮我们转化为375的,也就是我们写的px都是2倍的,vant组件样式也跟着转化那就是375 / 2。但我们不需要它转化,所以在转换时需要忽略它。
  • 如果你的设计稿是375,那就不用将忽略Vant
  • 具体配置
    提示: 我的是在vite.config.ts,有些小伙伴是在全局的postcss.config.js或者其他。总之在这个配置postcss中修改即可。
    vite.config.ts为例
export default defineConfig({css: {postcss: {plugins: [postcsspxtoviewport({ ... // 其他属性无需修改exclude: [/node_modules\/vant/], // 设置忽略文件,用正则做目录名匹配}]}}
})

四、这个unplugin-vue-components插件以往的按需导入有何区别呢?

  • 以往我们都是单独在plugins中单独创建vant.js,里面存着要用到的UI组件,用到一个就去手动添加,不要就手动删除,最后在main.js中统一导入,比较繁琐,半自动化。 示例:src/plugins/vant.js
  • 现在已无需在手动去添加、删除,以及去main.ts中引入了,只需要在vite.config.ts中配置好即可,非常方便。这才是真正意义上的UI组件按需导入。
  • 要感谢那些大佬们开发的插件,让我们开发时可以简化一些操作,提高开发效率。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/617626.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年前端面试中JavaScript的30个高频面试题之高级知识

基础知识 中级知识 21. 什么是执行上下文,执行堆栈,变量对象和作用域链? 执行上下文: 执行上下文是指代码执行的环境。它由作用域,变量对象和“this”关键字的值组成。 每当一个函数被执行时,就会创建一个执行上下文,并包含该函数的所有变量或属性。 JavaScript中有三种类型…

华为机试真题实战应用【赛题代码篇】-路灯照明(附Java、C++和python代码)

目录 问题描述 思路解析 思路1 思路2 代码实现 C++ 代码2

多无人机编队避障(人工势场法)

matlab2020正常运行&#xff0c;预设编队类型&#xff0c;目标位置&#xff0c;障碍物 多无人机编队避障&#xff08;人工势场法&#xff09;资源-CSDN文库

树莓派ubuntu:新增用户

切换到Root用户 sudo -i创建新用户 useradd -m 新用户名设置密码 passwd 新用户名将新用户加入sudo用户组 adduser newname sudo拷贝数据 cp -R /home/旧用户名/* /home/新用户名/查看用户所属组 id 新用户名更改文件所属 sudo chown 新用户名:group /home/新用户名/*gr…

浅析链表结构

一、单向链表 C语言中数组是常用的一种数据类型&#xff0c;但可惜数组长度是固定大小的&#xff0c;不能动态扩展&#xff0c;使用起来有时不是很方便。然后就有了自定义的动态数组结构&#xff0c;动态数组就比较好用了&#xff0c;长度可以任意扩展&#xff0c;但还有一个问…

easyexcel 3.0.x 版本实现指定列 锁定以及指定列隐藏

1&#xff1a;效果示例 2&#xff1a;代码示例&#xff1a; UnLockCell.java package com.example.juc.zhujie;/*** Author * Date Created in 2023/12/19 10:09* DESCRIPTION:* Version V1.0*/import java.lang.annotation.*;/*** 用于标记锁定哪些列不需要锁定* author 12…

YOLOv8改进 | 检测头篇 | 利用DySnakeConv改进检测头专用于分割的检测头(全网独家首发,Seg)

一、本文改进 本文给大家带来的改进机制是一种我进行优化的专用于分割的检测头,在分割的过程中,最困难的无非就是边缘的检测,动态蛇形卷积(Dynamic Snake Convolution)通过自适应地聚焦于细长和迂回的局部结构,准确地捕捉管状结构的特征。这种卷积方法的核心思想是,通过…

【LangChain学习之旅】—(7) 调用模型:使用OpenAI API还是微调开源Llama2/ChatGLM?

【LangChain学习之旅】—&#xff08;7&#xff09; 调用模型&#xff1a;使用OpenAI API还是微调开源Llama2/ChatGLM&#xff1f; 大语言模型发展史预训练 微调的模式用 HuggingFace 跑开源模型申请使用 Meta 的 Llama2 模型通过 HuggingFace 调用 LlamaLangChain 和 Hugging…

若依在表格中如何将字典的键值转为中文

文章目录 一、需求&#xff1a;二、问题解决步骤1、给需要转换的列绑定formatter属性2、获取字典项3、编写formatter属性绑定的方法 一、需求&#xff1a; 后端有时候返回的是字典的键值&#xff0c;在前端展示时需要转成中文值 后端返回的是dictValue&#xff0c;现在要转换…

【Git】本地仓库文件的创建、修改和删除

目录 一、基本信息设置 1、设置用户名2、设置用户名邮箱 二、Git仓库操作介绍 1、创建一个新的文件夹2、在文件内初始化git仓库&#xff08;创建git仓库&#xff09;3、向仓库中添加文件 1.创建一个文件2.将文件添加到暂存区3.将暂存区添加到仓库 4、修改仓库文件 1.修改文件2.…

java中数组

文章目录 java中数组思维导图数组数组概念 数组定义格式详解数组的访问 常见异常数组索引值越界异常&#xff1a;ArrayIndexOutOfBoundsException空指针异常&#xff1a;NullPointerException 案例例一打印A-Z和0-9例二数组转置输出 java中数组 思维导图 数组 数组概念 组就…

Java8常用新特性

目录 简介 1.默认方法 2..Lambda表达式 3.Stream API 4.方法引用 5.Optional类 简介 Java 8是Java编程语言的一个重要版本&#xff0c;引入了许多令人兴奋和强大的新特性。这些特性使得Java程序更加现代化、灵活和高效。让我们一起来探索一些Java 8的常用新特性吧&#…

NestJS 如何自定义中间件以及实际项目基于中间件提升项目开发效率

前言 NestJS 作为一个强大的 Node.js 框架&#xff0c;允许你通过中间件对请求和响应进行处理。中间件的概念在其他许多框架中也存在&#xff0c;它们在请求处理流程的早期执行&#xff0c;因此非常适合执行如日志记录、请求验证、设置响应头等任务。 在这篇教程中&#xff0…

Mac 下载 nvm 后执行nvm -v 命令报错 nvm: command not found

1、问题&#xff1a;Mac 使用命令下载nvm 成功后执行 nvm -v 查看&#xff0c;报错&#xff1a;nvm command not found 2、原因&#xff1a;可能是系统更新后&#xff0c;默认的 shell 是 zsh&#xff0c;所以找不到配置文件 3、解决&#xff1a;可添加编辑.bash_profile 和 …

回归和拟合的关系

在统计学和机器学习中&#xff0c;回归&#xff08;Regression&#xff09;和拟合&#xff08;Fitting&#xff09;是密切相关的概念&#xff0c;它们通常一起使用来描述如何通过模型来逼近或拟合数据。 回归&#xff08;Regression&#xff09;&#xff1a; 回归是一种统计学…

Docker 安装部署

1、Docker 安装 ① 卸载docker&#xff0c;清空之前的docker文件 yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-selinux \docker-engine-selinux \docker-engine \docker-ce…

2021腾讯、华为前端面试题集(基础篇)

Vue 面试题 生命周期函数面试题 1.什么是 vue 生命周期2.vue 生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created 和 mounted 的区别 6.vue 获取数据在哪个周期函数 7.请详细说下你对 vue 生命周期的理解&#xff1f; **vue 路由…

达梦数据库主备集群

1&#xff1a;服务器硬件需求 按实际业务需求&#xff0c;选择合适的服务器&#xff0c;准备 3 台服务器&#xff0c;一台主库服务器&#xff0c;一台备库服务器&#xff0c;一台监视器服务器&#xff0c;服务器参数建议如下&#xff1a; 硬件要求物理内存>16 GB交换区Swa…

MySQL同步ES的几种方案

MySQL数据同步ES的几种方案 1. 同步双写 与业务耦合深&#xff0c;且业务响应时间长 2. 异步双写 这时可以使用类似MQ这样的中间件&#xff0c;业务主写时向MQ发送一条信息&#xff0c;再由一个聚合服务区消费&#xff0c;最终同步到ES 3. 定时任务 不好配置时间&#xff0c;…

Spring Boot - Application Events 的发布顺序_ContextRefreshedListener

文章目录 Pre概述Code源码分析 Pre Spring Boot - Application Events 的发布顺序_ApplicationEnvironmentPreparedEvent 概述 Spring Boot 的广播机制是基于观察者模式实现的&#xff0c;它允许在 Spring 应用程序中发布和监听事件。这种机制的主要目的是为了实现解耦&#…