微信小程序使用Vant Weapp

前言

提示：小程序开发工具版本：最新( 1.03.2011120 ) ------- Vant-Weapp版本：1.6.2

---

提示：以下安装步骤语音基于JavaScript,且安装使用npm，其它安装使用方法后期更新。

1.创建小程序

2.安装

1.进入到项目的根目录
cd：'E:\MyWeiXin\test_01'
2.初始化项目生成package.json
 npm init -y   -y:自动回车执行默认配置
3.安装package.json中依赖库
 npm install
4.安装vant/weapp
 npm i @vant/weapp -S --production

提示：以上命令执行完成工程目录下会多出以下文件：如图

3.构建

点击工具-->选择构建npm-->完成后会生成miniprogram_npm文件

4.使用

1.使用前需将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

2.引用组件----以Button组件为例，只需要在app.json或对应页面的json中配置 Button 对应的路径即可：

// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}
<van-button type="primary">按钮</van-button>

3.引入后在对应页面下的wxml文件中使用：

<van-button type="primary">按钮</van-button>

5.注意

问题一：

1.按照Vant Weapp官方步骤来安装 会出现构建失败，提示找不到package.json及miniprogram这两个文件，其实就是因为图上的步骤导致的。package可通过npm init解决，第二个文件找不到需要你手动创建miniprogram文件夹方可构建成功，到这构建方可成功，但是引入使用组件时编译会报找不到这个组件，其实就是路径问题，你会发现miniprogram文件下还有个miniprogram_npm文件，这个文件下才是vant的组件，解决办法就是将miniprogram_npm文件移出到根目录并且修改"miniprogramNpmDistDir": "./miniprogram_npm/"配置。

本人新手 以上是自己的一些安装使用心得，写的不好请大家见谅，谢谢！