WePY2安装与引入Vant Weapp小程序组件

一、Wepy 2.x 安装

$ npm install @wepy/cli -g # 全局安装 WePY CLI 工具
$ wepy init standard myproj # 使用 standard 模板初始化项目
$ cd myproj # 进入到项目目录
$ npm install # 安装项目依赖包
$ npm run dev # 监听并且编译项目

　　

根据wepy官网安装步骤使用npm安装

1.安装过了的童鞋，可跳过第一步

npm install @wepy/cli -g

2.查看wepy版本（可略过），确保安装的是最新版本 

wepy -v

3.初始化项目

npm install

4.  进入到项目目录

cd myproj 

5. 安装依赖包

npm install 

6. 开启实时编译（建议新建一个命令窗开启实时编译）

npm run dev

此时我们的项目就已经安装并创建完成了，可导入微信开发者工具查看

7.导入微信开发者查看是否正常


页面显示正常且并无报错的话我们就开始进行下一步（若有错误请查看是否按照当前步骤进行，或将项目删除后重新创建）
参考Wepy官网：https://wepyjs.github.io/wepy-docs/2.x/#/base/getstart

二、安装Vant组件并引入到项目

1.建议使用npm安装Vant组件
 官方给出了三个安装方式

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

　　在项目根目录下安装

npm i @vant/weapp -S --production

　　

　　安装完成后在package.json页面出现 "@vant/weapp": "^1.5.0", 即安装成功

       

2.将项目用VScode打开，删掉index.wpy页面内多余代码，（打开同时确保实时编译已运行）
如下：


3.引入Vant组件

将 "van-button": "@vant/weapp/button/index"引用路径改为

   "van-button": "module:@vant/weapp/dist/button/index"

在index.wpy页面内引入button按钮组件

<config>
{
    usingComponents: {
      "van-button": "module:@vant/weapp/dist/button/index"
    }
}
</config>

如下：

　　4.保存，查看引入是否成功

组件正常显示且并未报错，引入组件成功
参考：wepy官方 --> 组件 --> 使用组件
 Vant官网：https://vant-contrib.gitee.io/vant-weapp/