uniapp：引入vant框架

1. 在Hbuilder中新建uni-app，选择默认模板。

2.在项目目录右键，选择“使用命令行窗口打开所在目录”，运行npm i vant@2 -S

注意需要选择2.x版本，选择vant的最新版本，后续编译会出错。原因未知。

3. 在main.js上增加两句

import Vant from "vant" Vue.use(Vant)

4. 在app.vue文件中，引入样式

@import 'vant/lib/index.css'

5. 在index.vue中加入vant的button示例代码

如果遇到：required is not defined 如下操作 vue.config.js中的配置如下

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

注意：本方法只能使用H5方式，如果编译成app，运行白屏，并报错：

好久没有使用这个软件去开发了，今天发现引入出现不一样的状态，记录一下，报错是[ pages/index/index.json 文件内容错误] pages/index/index.json: ["usingComponents"]["van-button"]: "@/vant/lib/button/index" 未找到(env: Windows,mp,1.06.2303220; lib: 3.1.0) 创建项目之后，如果没有page.json进入文件目录cmd之后npm init -y 然后安装# npm i @vant/weapp -S --production下载vant 会生成依赖包，里面有dist这个文件夹

然后把dist这个文件夹内容，cv到项目根目录创建一个新的文件夹，比如wxcompontnts放进去，然后dist文件名改成vant， 在app.vuey引入@import "/wxcomponents/vant/common/index.wxss"

最后在pages.json按需引入。 "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8", "usingComponents": { "van-button": "/wxcomponents/vant/button/index"

			}
},