vant-webapp : https://vant-contrib.gitee.io/vant-weapp
-
在项目根目录打开命令窗口，使用命令
npm init -y初始化npm
初始化 npm -
点击菜单
工具 -> 构建npm，提示完成，则表示构建npm已完成
构建 npm
成功提示.png
-
使用npm模块构建项目，打开项目中的
project.config.json文件，点击右上角详情 -> 本地设置勾选使用 npm 模块，确认配置文件中的packNpmManually和packNpmRelationList属性如图第二步所示
使用 npm 构建项目 -
使用命令
npm i @vant/weapp -S --production初始化vant-webapp
初始化 vant-webapp 使用 button 组件，测试是否成功引入 vant-webapp，在需要使用此组件页面的
json文件中设置usingComponents，如需全局使用，则在根目录下的app.json中设置即可
{
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
}
- 在 index.xml 和 index.wxss 中添加以下代码，保存编译，若成功显示按钮，则引入成功
<!-- index.wxml -->
<view class="index-page">
<van-button type="info">信息按钮</van-button>
</view>
/* index.wxss */
.index-page {
min-height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
-
编译运行结果
成功引入 vant-webapp
