-
鼠标移动至目录miniprogram上,单击鼠标右键,点击“在外部终端窗口中打开”,打开命令窗口
-
在命令窗口中执行命令:
npm init -y
,创建package.json文件 -
npm i @vant/weapp -S --production
,安装vant weapp
npm i
同npm install
-S
同--save
-D
同--save-dev
-
工具>构建npm,miniprogram下新增子目录miniprogram_npm
遇到如下报错:
[ miniprogram/miniprogram_npm/@vant/weapp/nav-bar/index.json 文件内容错误] miniprogram/miniprogram_npm/@vant/weapp/nav-bar/index.json: [“usingComponents”][“van-icon”]: “…/icon/index” 未找到。
试过卸载重装vant weapp,但依然失败,最后的解决方法是,将 miniprogram_npm\@vant\weapp 下的内容全部清除,并将 node_modules\@vant\weapp\dist 下的所有内容复制于此。 -
详情>本地设置,勾选“使用npm模板”
-
pages/test/test.json中声明所引用组件对应的文件路径
{
"usingComponents": {
"van-button": "@vant/weapp/button/index"
},
"navigationBarTitleText": "test"
}
- pages/test/test.wxml中引用vant weapp的button组件
<!-- pages/test/test.wxml -->
<view class="box">
<van-button type="danger">危险按钮</van-button>
</view>
/* pages/test/test.wxss */
.box{
text-align: center;
margin: 10rpx;
}