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

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

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

pnpm add vite-plugin-style-import@2.0.0
// 或 npm i [email protected]
//    yarn add [email protected]

3、自动导入组件插件

pnpm add unplugin-vue-components/vite@0.26.0
// 或 npm i unplugin-vue-components/[email protected]
//    yarn add unplugin-vue-components/[email protected]

二、配置 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依赖包下的路径
Vant4在Vue3.3中如何按需导入组件和样式_第1张图片

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

你可能感兴趣的:(Vue3,vue.js,前端框架,typescript,javascript)