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