uni-app中引入vant2项目（最新、亲测有效、超详细步骤）

最近项目需要在uni-app中引入vant2的项目，在搜寻各个资料后发现网上的资料并不能成功复现。遇到了许许多多的坑，下面复述实现原理，以及避免出错。

1. 创建uni-app项目
   

2.安装vant，ctrl+c，打开Hbulider的内置终端,输入以下命令
npm i vant@latest-v2
3.安装成功后在main.js文件中添加一下代码

import Vue from 'vue'
import Vant from "vant";
// import 'vant/lib/index.css';
//注意这里引入的是less文件而不是css文件，引入css文件会导致控制台报错无法编译成功
import 'vant/lib/index.less'

4.上述工作完成后，我们在index文件夹中写van-button这个组件编译H5，编译后的效果如下

提示这样的错误信息需要在Vue.config.js配置后才能正常使用。
5.vue.config.js中的配置如下

  chainWebpack: (config) => {
    config.module 
      .rule("mjs$")
      .test(/\.mjs$/)
      .include.add(/node_modules/)
      .end()
      .type("javascript/auto");
  },
};

以上操作配置完成后，uni-app即可成功引入vant2。