快捷導(dǎo)航

Vue3中使用vant的踩坑實(shí)戰(zhàn)日記

更新時(shí)間：2022年10月17日 15:04:59 作者：東非不開森

Vant是有贊前端團(tuán)隊(duì)開源的移動(dòng)端組件庫(kù),于2017年開源,已持續(xù)維護(hù)4年時(shí)間,下面這篇文章主要給大家介紹了關(guān)于Vue3中使用vant的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下

前言

我照著視頻中老師教的方式去使用vant(和官網(wǎng)教程一樣)，發(fā)現(xiàn)樣式根本不起作用（想截個(gè)圖來著，但是vite熱更新太厲害了，找不到了哈哈哈），然后又反復(fù)看了視頻一遍，檢查自己插件啥的而又沒有安裝好，發(fā)現(xiàn)和老師的一樣。。。。，頭疼…害。。。，幸好我最后在想用不用在main.js引入vant（因?yàn)槔蠋熣f插件會(huì)自動(dòng)識(shí)別，所以一開始一直以為是自己配置或者代碼寫錯(cuò)了的問題QAQ），最后成功了嘿嘿嘿（但是這樣的話自動(dòng)按需引用的插件不就沒有用了嗎。。。，所以又換了別的方法）

當(dāng)然這里先寫怎樣在Vue3中使用vant，最后再附上我的解決方法（ps：我估計(jì)不是每個(gè)人都有這樣的問題，雖然我也不知道我為啥會(huì)有emm…傷心。。。。）

一、下載vant

vant官網(wǎng)：vant

這個(gè)里面有很詳細(xì)的步驟，我這里只寫我用的，別的方法當(dāng)然也是可以的

最好看官網(wǎng)，因?yàn)楣倬W(wǎng)基本不會(huì)出錯(cuò)的。。

下載vant

通過 npm 安裝

Vue 3 項(xiàng)目，安裝最新版 Vant
npm i vant

Vue 2 項(xiàng)目，安裝 Vant 2
npm i vant@latest-v2

二、下載插件

通過 npm 安裝

npm i vite-plugin-style-import@1.4.1 -D

三、配置插件

配置插件

安裝完成后，在 vite.config.js 文件中配置插件：

import vue from '@vitejs/plugin-vue';
import styleImport, { VantResolve } from 'vite-plugin-style-import';

export default {
  plugins: [
    vue(),
    styleImport({
      resolves: [VantResolve()],
    }),
  ],
};

在自己對(duì)應(yīng)的vite.config.js 進(jìn)行配置

然后npm run dev 重新啟動(dòng)服務(wù)（當(dāng)然vite熱更新很快的，大多數(shù)都不用重啟服務(wù)）

四、簡(jiǎn)單使用

放在template里面

	<van-button type="primary">主要按鈕</van-button>
      <van-button type="success">成功按鈕</van-button>
      <van-button type="default">默認(rèn)按鈕</van-button>
      <van-button type="warning">警告按鈕</van-button>
      <van-button type="danger">危險(xiǎn)按鈕</van-button>

效果

（但是我的沒顯示QAQ，最后才顯示的）

五、我的解決方法

方法一：

這個(gè)是全局使用，這個(gè)是沒有任何問題的，但是不推薦

官網(wǎng)也有說，Vant 支持一次性導(dǎo)入所有組件，引入所有組件會(huì)增加代碼包體積，因此不推薦種做法。

方法二：手動(dòng)按需引用，

我的不可以，我也不知道為什么。。。，會(huì)報(bào)這個(gè)錯(cuò)誤，

翻看了網(wǎng)上的資料，有人說是目錄層級(jí)錯(cuò)誤，

在resolvers這個(gè)位置添加下面代碼；

   libs: [
        {
          libraryName: "vant",
          esModule: true,
          resolveStyle: (name) => `../es/${name}/style`,
        },
      ],

emm…我試了，但是沒有起作用，但是我覺得跟這個(gè)有關(guān)系的（報(bào)錯(cuò)信息也是顯示的路徑）

方法三：

刪除node_modules,再npm install安裝依賴

這個(gè)是可行的，但是可能是vscode的原因，或者我在別的文件也開了node_modules（具體原因我還不知道），反正VSode就是打不開那個(gè)文件了，命令行路徑是那個(gè)文件，就是打不開。。。。，重啟電腦也沒有用，但是我還是想知道刪除node_modules是否可行，所以我就在命令行npm install，在重啟下服務(wù)npm run dev，發(fā)現(xiàn)樣式啥的都可以顯示出來了，所以我認(rèn)為這個(gè)方法是可行的，可能是是vscode的原因，或者我在別的文件也開了node_modules，總而言之。。。。痛苦面具

方法四：

有個(gè)熱心網(wǎng)友說會(huì)不會(huì)是我現(xiàn)在的插件版本不對(duì)，我看了看官網(wǎng)，又看了看他發(fā)的那個(gè)插件，發(fā)現(xiàn)是不一樣的，我是看官網(wǎng)的教程，但是我覺得應(yīng)該不是這個(gè)問題，因?yàn)榭赡苓@個(gè)東西更新的快，官網(wǎng)給的是最新的，按理說作用都是一樣的（自動(dòng)按需引入），本來想試試他發(fā)的那個(gè)版本的，但是我的那個(gè)文件在刪除node_modules無法打開了…emm…

他發(fā)的那個(gè)版本：