uni-app之前一直只支持vue2語法，
- 2021年8月：新版支持 了vue3 開發(fā)，App平臺編譯器升級為 Vite；
新版 uni-app 框架主要做了三大改進：
- 重寫框架內(nèi)核：基于
vue3 + ts重寫內(nèi)置組件和API，實現(xiàn)更徹底、更高效的tree-shaking； - 新增支持 Vite 構(gòu)建工具，在H5平臺實現(xiàn)秒開預覽；
- 新增支持 Vue3.x，實現(xiàn)更靈活的開發(fā)方式，及更高的運行性能；
今天主要講講如何使用vue3+vant
1.創(chuàng)建項目
?注意：建議使用HBuilder最新穩(wěn)定版?
HBuilder官網(wǎng)地址
?項目配置
?2.下載vant
# 通過 npm 安裝
npm i @vant/weapp -S --production
# 通過 yarn 安裝
yarn add @vant/weapp --production
# 安裝 0.x 版本
npm i vant-weapp -S --production
?3.引入
- 與?
/pages?同級創(chuàng)建?/wxcomponents?目錄 - 復制node_modules-@vant-weapp-dist到
wxcomponents文件夾 dist改名為vant
?
?4.pages.json引入使用
在"globalStyle":{}?屬性下加入以下片段，可按需引入具體需要全局引入的組件，引入規(guī)則如下
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"app-plus": {
"background": "#efeff4"
},
"usingComponents": {
"van-button": "/wxcomponents/vant/button/index"
}
},或在單個頁面style對象{}中引入
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首頁",
"usingComponents": {
"van-button": "/wxcomponents/vant/button/index"
}
}
}
?頁面使用
?5.常見的坑
***注意：小程序的坑***
如果遇到報錯
把小程序詳情>本地設置>將js編譯成es5，不然會飄紅?
?6.最后效果
?文章來源地址http://www.zghlxwxcb.cn/news/detail-485625.html文章來源：http://www.zghlxwxcb.cn/news/detail-485625.html
?
到了這里，關于如何用uni-app+vue3+vant開發(fā)微信小程序的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
