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

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

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

前言

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

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

一、下載vant

vant官網(wǎng)：vant

這個里面有很詳細的步驟，我這里只寫我用的，別的方法當然也是可以的

最好看官網(wǎng)，因為官網(wǎng)基本不會出錯的。。

下載vant

通過 npm 安裝

Vue 3 項目，安裝最新版 Vant
npm i vant

Vue 2 項目，安裝 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()],
    }),
  ],
};

在自己對應的vite.config.js 進行配置

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

四、簡單使用

放在template里面

	<van-button type="primary">主要按鈕</van-button>
      <van-button type="success">成功按鈕</van-button>
      <van-button type="default">默認按鈕</van-button>
      <van-button type="warning">警告按鈕</van-button>
      <van-button type="danger">危險按鈕</van-button>

效果

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

五、我的解決方法

方法一：

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

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

方法二：手動按需引用，

我的不可以，我也不知道為什么。。。，會報這個錯誤，

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

在resolvers這個位置添加下面代碼；

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

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

方法三：

刪除node_modules,再npm install安裝依賴

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

方法四：

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

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