在项目的根目录文件上点击右键,选择在终端中打开。
在命令窗口输入:npm init。默认配置下一步,完成后项目中生成package.json文件
在命令窗口输入:npm i @vant/weapp -S –production 。完成后项目中生成package-lock.json文件
回到微信小程序开发工具,在上方“工具”一栏中找到“构建npm”。稍等几秒即可构建成功。
最后在微信小程序开发工具右上角找到:详情—本地设置–使用npm模块。设置成功
修改 app.json
将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
修改 project.config.json
{ "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./" } ], }
打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。
// 通过 npm 安装 // app.json "usingComponents": { "van-button": "@vant/weapp/button/index" }
引入组件后,可以在 wxml 中直接使用组件
<van-button type="primary">按钮</van-button>
原文地址:http://www.cnblogs.com/shiliumu/p/16897473.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性