Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 5 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。
这里是vant 小程序版本的地址，点击直接进入即可浏览vant
第一步：创建小程序后，打开创建新项目的根目录 第二步：通过cmd运行当前项目 第三步：初始化当前项目
命令：npm init初始化完成状态： 这时候在文件夹中会发现多出两个配置文件 第四步：下载vant包 在当前项目根目录下进行输入命令下载即可 npm下载命令：npm i @vant/weapp -S --production cnpm下载命令：cnpm i @vant/weapp -S --production 下载完后会产生出依赖包node_modules
第五步：安装 miniprogram npm下载命令：npm i miniprogram-sm-crypto --production cnpm下载命令：cnpm i miniprogram-sm-crypto --production
第六步：修改配置（这里重要，不要省略）
①：将 app.json 中的 “style”: “v2” 这行代码删除（原因是小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱） ②：使用微信开发者工具所创建的项目，miniprogramRoot 默认为 miniprogram，而package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置
{ ... "setting": { ... "packNpmManually": flase, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./miniprogram/" } ] }第七步：构建npm工具 打开微信开发者工具，鼠标移入到 工具 这栏，找到构建Npm然后点击 第八步：使用组件 到这里配置vant就已经ok了，这里建议大家，在开发的不同页面下的json文件中按需引入 比如说：我需要在index这个页面中需要用到button这个按钮，可以在json文件中引入button 在index.wxml中使用 样式如下
然后就可以根据不同功能api进入按需引入使用就好啦
PS:提醒一下大家，大家在新创建项目后，进入微信开发者工具里面，有的默认版本会使用旧版本，会报错，记得换成新版本开发
打开微信开发者工具-》详情-》本地配置-》调试基础库（进行选择）
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
