一、新建微信小程序模版
選擇：不使用云服務(wù) / ts+less
二、引入Rant Weapp
https://vant-contrib.gitee.io/vant-weapp/#/quickstart文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-785656.html
我使用以下方式文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-785656.html
1、第一步
# 通過(guò) npm 安裝
npm i @vant/weapp -S --production
2、第二步
將 app.json 中的 "style": "v2" 去除
3、第三步
修改 project.config.json ，ui組件會(huì)根據(jù)這個(gè)路徑找
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
4、第四步
重啟開發(fā)工具、工具 -> 構(gòu)建 npm
5、第五步
typescript 支持
在 tsconfig.json 中增加如下配置，以防止 tsc 編譯報(bào)錯(cuò)。
請(qǐng)將path/to/node_modules/@vant/weapp修改為項(xiàng)目的 node_modules 中 @vant/weapp 所在的目錄。
{
...
"compilerOptions": {
...
"baseUrl": ".",
"types": ["miniprogram-api-typings"],
"paths": {
"@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
},
"lib": ["ES6"]
}
}
6、第六步
引入組件
// 通過(guò) npm 安裝
// app.json
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
7、第七步
引入組件后，可以在 wxml 中直接使用組件
<van-button type="primary">按鈕</van-button>
到了這里，關(guān)于微信小程序ts+less模版引入Rant Weapp的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
