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

2024-01-12 14:36

本文主要是介绍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组件按需导入。
  • 要感谢那些大佬们开发的插件,让我们开发时可以简化一些操作,提高开发效率。

这篇关于Vant4在Vue3.3中如何按需导入组件和样式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/598181

相关文章

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

Spring组件初始化扩展点BeanPostProcessor的作用详解

《Spring组件初始化扩展点BeanPostProcessor的作用详解》本文通过实战案例和常见应用场景详细介绍了BeanPostProcessor的使用,并强调了其在Spring扩展中的重要性,感... 目录一、概述二、BeanPostProcessor的作用三、核心方法解析1、postProcessB

Java导入、导出excel用法步骤保姆级教程(附封装好的工具类)

《Java导入、导出excel用法步骤保姆级教程(附封装好的工具类)》:本文主要介绍Java导入、导出excel的相关资料,讲解了使用Java和ApachePOI库将数据导出为Excel文件,包括... 目录前言一、引入Apache POI依赖二、用法&步骤2.1 创建Excel的元素2.3 样式和字体2.

kotlin中的行为组件及高级用法

《kotlin中的行为组件及高级用法》Jetpack中的四大行为组件:WorkManager、DataBinding、Coroutines和Lifecycle,分别解决了后台任务调度、数据驱动UI、异... 目录WorkManager工作原理最佳实践Data Binding工作原理进阶技巧Coroutine

浅析Python中的绝对导入与相对导入

《浅析Python中的绝对导入与相对导入》这篇文章主要为大家详细介绍了Python中的绝对导入与相对导入的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1 Imports快速介绍2 import语句的语法2.1 基本使用2.2 导入声明的样式3 绝对import和相对i

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

HTML5中下拉框<select>标签的属性和样式详解

《HTML5中下拉框<select>标签的属性和样式详解》在HTML5中,下拉框(select标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中,下拉框(<select>标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中

前端 CSS 动态设置样式::class、:style 等技巧(推荐)

《前端CSS动态设置样式::class、:style等技巧(推荐)》:本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法:对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式;通过数组语法,可以同时绑定多个类名或样式,此外,还可以结合计算属性来生成复杂的类名或样式对象,详细内容请阅读本文,希望能对你有所帮助...

Vue3中的动态组件详解

《Vue3中的动态组件详解》本文介绍了Vue3中的动态组件,通过`component:is=动态组件名或组件对象/component`来实现根据条件动态渲染不同的组件,此外,还提到了使用`markRa... 目录vue3动态组件动态组件的基本使用第一种写法第二种写法性能优化解决方法总结Vue3动态组件动态