- Vant Weapp组件库官方手册
https://youzan.github.io/vant-weapp/#/quickstart - 首先确保本机已有npm环境,如没有安装,自行百度
https://jingyan.baidu.com/article/e4511cf38c05092b845eaf9b.html - 安装成功之后出现以下说明安装成功
- 打开微信开发工具新建一个demo测试小程序
- 新建一个demo页面方便测试
- 打开调试器,选择终端 ,点击新建终端
- 新建完成后光标一直末尾 输入命令 npm init 并回车
npm init
7. 一路回车即可直到出现 Is this OK? 输入 yes 并回车
8. 打开目录 project.config.json 文件 修改 packNpmManually 为 true ,packNpmRelationList 并添加对象数值
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
],
9. 打开目录 package.json 文件 添加 private 属性 为 true ,
"license": "ISC",
"private": true
- 点击终端 输入命令 npm install 并回车
npm install
11. 终端继续输入 命令 npm i @vant/weapp -S --production 并回车,(ps:也可以安装其他组件命令) 然后点击详情 勾选 构建npm模块
npm i @vant/weapp -S --production
- 点击上方工具菜单选择构建npm ,出现耗时xxx秒,点击完成
- 引入 Vant Weapp 组件测试 打开 demo.json 引入组件 ,demo.wxml 添加测试 按钮
"van-button": "@vant/weapp/button/index"
<van-button type="default">默认按钮</van-button>