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

前言

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

我的环境

依赖名称 版本
pnpm 8.14.0
Node 16.20.1
Vue3 3.3.11
Vite 5.0.8

目录

一、安装

二、配置 vite.config.ts

1、按需导入组件

2、按需导入UI组件样式

3、完整代码

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

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

一、安装

1、vant

js 复制代码
pnpm add vant  // 默认为vant4
// 或 npm i vant  
//    yarn add vant

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

js 复制代码
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、自动导入组件插件

js 复制代码
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导入。

js 复制代码
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

html 复制代码
<template>
	<van-button>按钮</van-button>
</template>

components.d.ts 代码如下:

js 复制代码
/* 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,加入指定路径

js 复制代码
 "include": [
		"./components.d.ts",
	]

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

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

js 复制代码
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、完整代码

js 复制代码
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为例
js 复制代码
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组件按需导入。
  • 要感谢那些大佬们开发的插件,让我们开发时可以简化一些操作,提高开发效率。
相关推荐
customer0815 分钟前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf16 分钟前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据23 分钟前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_3901617731 分钟前
防抖函数--应用场景及示例
前端·javascript
334554321 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript