微信小程序引用vant-UI组件

1.用微信开发者工具搭建一个小程序

目录结构如图所示

2.引用vantUI组件

步骤一

# 通过 npm 安装

npm i @vant/weapp -S --production

# 通过 yarn 安装

yarn add @vant/weapp --production

# 安装 0.x 版本

npm i vant-weapp -S --production

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

4.

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

5.打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

vant官方网站也有教程我这就是从那贴过来的

https://vant-contrib.gitee.io/vant-weapp/#/quickstart#yin-ru-zu-jian

 温馨提示：我发现我建设的项目没有package.json

大家可以手动添加到项目中

文件如下是package.json重的全部内容

{
  "name": "vant-weapp-demo",
  "version": "1.0.0",
  "description": "Collection of vant-weapp demos.",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@vant/weapp": "^1.0.0"
  }
}

6.使用方法

比如在一个页面使用一个按钮或者一个弹出框

 <van-button type="primary" bind:click="onClick">
    默认按钮
  </van-button>
 <van-toast id="van-toast" />

这个时候要在app.json中配置

 "usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "van-toast": "@vant/weapp/toast/index"
  },

在对应的页面中引入相应的组件

import Toast from '@vant/weapp/toast/toast';

用的时候，看着官方文档直接用就好了

Toast('我是提示文案，建议不超过十五字~');