前言
最近我在Vue 3.3的項(xiàng)目中對(duì)Vant4做按需導(dǎo)入時(shí)，盡管按照Vant4的官方指南進(jìn)行操作，但樣式仍然無法正確加載。經(jīng)過深入研究和多篇文章的比較，我終于找到了在Vue3中如何正確的按需導(dǎo)入Vant 4組件和樣式的方法。由于Vue3.3和Vant4相對(duì)較新，相關(guān)資料可能還不夠完善，因此我認(rèn)為分享這個(gè)經(jīng)驗(yàn)非常重要。希望這篇文章能幫助到同樣遇到此問題的開發(fā)者們，并推動(dòng)相關(guān)技術(shù)的進(jìn)步。
我的環(huán)境
| 依賴名稱 | 版本 |
|---|---|
| pnpm | 8.14.0 |
| Node | 16.20.1 |
| Vue3 | 3.3.11 |
| Vite | 5.0.8 |
目錄
一、安裝
二、配置 vite.config.ts
1、按需導(dǎo)入組件
2、按需導(dǎo)入U(xiǎn)I組件樣式
3、完整代碼
三、解決 Vant 375 設(shè)計(jì)尺寸問題
四、這個(gè)unplugin-vue-components跟以往的按需導(dǎo)入有何區(qū)別？
一、安裝
1、vant
pnpm add vant // 默認(rèn)為vant4
// 或 npm i vant
// yarn add vant
2、自動(dòng)按需導(dǎo)入U(xiǎn)I庫樣式的插件
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、自動(dòng)導(dǎo)入組件插件
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、按需導(dǎo)入組件的插件 unplugin-vue-components
作用：全局自動(dòng)注冊(cè)項(xiàng)目中的公共組件或UI組件，組件中需要使用到的公共組件或UI組件無需import手動(dòng)導(dǎo)入，直接使用即可。然后它會(huì)在根目錄自動(dòng)生成components.d.ts，里面保存了我們使用了哪些組件。
注意：僅限.vue后綴的文件。如果是.ts或.js結(jié)尾的仍需在頂部import導(dǎo)入。
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers' // 取出vant組件按需導(dǎo)入方法
export default defineConfig({
plugins: [
Components({
dts: true, // 允許項(xiàng)目根目錄下的components.d.ts執(zhí)行
resolvers: [VantResolver()], // 自動(dòng)按需導(dǎo)入U(xiǎn)I組件
}),
]
})
例如：我用了van-button，它會(huì)自動(dòng)將van-button這個(gè)組件幫我們注冊(cè)到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、自動(dòng)按需導(dǎo)入U(xiǎn)I樣式的插件 vite-plugin-style-import
現(xiàn)在頁面可以使用vant組件了，但是沒有UI自帶的樣式，所以需要再配置UI庫的樣式路徑。文章來源：http://www.zghlxwxcb.cn/news/detail-812730.html
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依賴包下的路徑
文章來源地址http://www.zghlxwxcb.cn/news/detail-812730.html
3、完整代碼
import Components from 'unplugin-vue-components/vite' // 自動(dòng)按需導(dǎo)入組件
import { VantResolver } from 'unplugin-vue-components/resolvers' // 取出vant的按需導(dǎo)入組件
import { createStyleImportPlugin } from 'vite-plugin-style-import' // 用于配置自動(dòng)按需導(dǎo)入vant組件庫的樣式
export default defineConfig({
plugins: [
// 自動(dòng)按需導(dǎo)入樣式
createStyleImportPlugin({
resolves: [
{
libraryName: 'vant',
libraryNameChangeCase: 'pascalCase',
resolveStyle: name => {
return `vant/es/${name.toLowerCase()}/index.css`
},
},
],
}),
// 自動(dòng)按需導(dǎo)入組件
Components({
dts: true,
resolvers: [VantResolver()],
}),
]
})
三、解決 Vant 375 設(shè)計(jì)尺寸問題
-
Vant自帶是375尺寸的，如果我們是750最后插件幫我們轉(zhuǎn)化為375的，也就是我們寫的px都是2倍的，vant組件樣式也跟著轉(zhuǎn)化那就是375 / 2。但我們不需要它轉(zhuǎn)化，所以在轉(zhuǎn)換時(shí)需要忽略它。 - 如果你的設(shè)計(jì)稿是375，那就不用將忽略
Vant。 - 具體配置
提示： 我的是在vite.config.ts，有些小伙伴是在全局的postcss.config.js或者其他?？傊谶@個(gè)配置postcss中修改即可。
以vite.config.ts為例
export default defineConfig({
css: {
postcss: {
plugins: [
postcsspxtoviewport({
... // 其他屬性無需修改
exclude: [/node_modules\/vant/], // 設(shè)置忽略文件，用正則做目錄名匹配
}）
]
}
}
})
四、這個(gè)unplugin-vue-components插件跟以往的按需導(dǎo)入有何區(qū)別呢？
- 以往我們都是單獨(dú)在
plugins中單獨(dú)創(chuàng)建vant.js，里面存著要用到的UI組件，用到一個(gè)就去手動(dòng)添加，不要就手動(dòng)刪除，最后在main.js中統(tǒng)一導(dǎo)入，比較繁瑣，半自動(dòng)化。 示例：src/plugins/vant.js - 現(xiàn)在已無需在手動(dòng)去添加、刪除，以及去
main.ts中引入了，只需要在vite.config.ts中配置好即可，非常方便。這才是真正意義上的UI組件按需導(dǎo)入。 - 要感謝那些大佬們開發(fā)的插件，讓我們開發(fā)時(shí)可以簡化一些操作，提高開發(fā)效率。
到了這里，關(guān)于Vant4在Vue3.3中如何按需導(dǎo)入組件和樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
