微信小程序怎么引入Vant框架

這篇文章主要介紹微信小程序怎么引入Vant框架，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

實現步驟

1. 打開微信小程序的開發工具，進入項目。在項目的根目錄文件上點擊右鍵。選擇在終端中打開。(注意是根目錄)

2. 在命令窗口中鍵入npm init。然后所有配置都按默認配置進行，只需點擊回車鍵即可。

3. 在命令窗口中鍵入npm install進行構建，成功之后會在根目錄下生成 package.json 和 package-lock.json 文件

4. 接下來繼續安裝 Vant框架 ，步驟可根據官網進行操作vant-contrib.gitee.io/vant-weapp/…

　4.1 npm i @vant/weapp -S --production

　4.2 npm i vant-weapp -S --production

　4.3 修改 app.json

　4.4 修改 project.config.json

5. 回到微信開發者工具，在“工具”一欄中找到“構建npm”。等待構建成功即可。

6. 最后我們要使用 npm 模塊, 在"詳情"中找到使用 "npm 模塊" 勾選即可

7. 使用Vant組件, 在app.json或index.json中引入組件，詳細介紹見 Vant官網快速上手

8. 在頁面中使用，直接引入組件即可。

··· 小插曲 ···

　　由于我這個是測試號AppId建的項目，是沒有使用云開發的。導致到后面步驟操作完之后就報錯了！報錯信息如下圖（1）；這時候我才發現這項目目錄跟我另外一個云開發的項目的文件目錄不一樣，導致文件找不到，具體啥原因我也不曉得。但是我在云開發項目上是成功的了，如下圖（2）；步驟是和以上寫的步驟一模一樣。

由此得出結論，大家盡量使用正式的AppId(即小程序公共平臺中注冊成功后的AppId)。避免越到后面麻煩越大。

　　原本想著用云開發項目再操作一遍，把最后成功的效果放上來，而不是記錄一篇有問題的筆記。但是想了想這樣也還不錯，警醒自己下次不要再犯這個錯誤。所以最終還是以這篇博客呈現給大家。希望也可以起到一個提醒大家的作用，注意細節，不要粗心大意。

··· 神奇的一幕 ···

　　第二天我打開微信開發者工具發現，測試號AppId的項目又可以了，控制臺報錯信息也沒有了。這個就很尷尬了呀！不太了解是咋回事（如果有大佬知道，請直接拿答案丟我吧!不敢說話...）。直接上圖，如下圖（3）；

圖（1）： 報錯信息

圖（2）：含云開發項目成功使用Vant組件

圖（3）：測試號AppId成功使用Vant框架

以上是“微信小程序怎么引入Vant框架”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！