vant-weapp1.8.2快速上手

前言

vant-weapp V1.8.2
微信开发者工具 V1.05.2108130
微信开发者工具调试基础库 2.19.2

1、首先要看完vant-weapp的文档
2、微信npm支持这个也要理解，npm环境还是要自己先安装好的
3、微信开发者工具工具要安装最新的

开始了，工具创建一个项目先，我这里用的自己的测试号，建议大家自己申请一个就好

语言选择javaScript

image.png

创建好之后的初始目录

image.png

终端中执行哈，开发者工具这个创建终端是默认到项目根目录的

cnpm i @vant/weapp -S --production
cnpm i vant-weapp -S --production
cnpm install

依赖已经都下载回来，我这个用cnpm淘宝镜像的，大家用npm跑就行了，镜像不一样而已，结果是差不多的....

image.png

详情-》本地配置，勾选使用npm模块

image.png

工具-》npm构建

image.png

image.png

image.png

构建成功后的项目目录结构

image.png

跟着官网修改配置文件

修改 app.json，去除"style": "v2"

image.png

修改 project.config.json

image.png

image.png

组件引入看情况，把常用的放到app.json中

image.png

image.png

组件不常用的单独调用，比如Circle 环形进度条

image.png

image.png

到这里这个框架算是可以开始使用了，框架提供了不少组件，组件中有不少API，这些API都是必须要一个个看清楚理解好的，比如API中有修改颜色的Props，就不要傻傻的自己写样式强行覆盖class，如果没有API那就强行修改吧，能处理问题就好。