【微信小程序】小程序内如何导入vantUI组件

简单记录一下如何在微信小程序内引入vantUI组件（亲测有效）

1. 以新建一个微信小程序项目为例，新建一个小程序后，打开微信开发者工具
   
   在打开后的终端下输入
   npm i @vant/weapp -S --production
   按下回车

---

此时，项目根路径下会出现一个node_modules文件夹，如下图所示

如果未出现该文件夹，可以点目录文件夹上的刷新按钮，即可刷新列表

---

2.完成node_modules依赖安装后，需要修改app.json文件，修改如下

将上图中所框选部分删除即可

---

3.项目根目录下新建package.json文件,文件位置及文件内容如下

{
  "name": "mp-demo1",
  "version": "1.0.0",
  "license": "ISC",
  "dependencies": {
    "@vant/weapp": "^1.0.6"
  },
  "prettier": {
    "printWidth": 120,
    "semi": false,
    "singleQuote": true
  }
}

---

4.依照下图中所示的操作步骤，执行npm操作

---

5.npm完毕后，项目根路径下会出现一个miniprogram_npm文件夹，如下图所示，代表构建成功

---

6.配置小程序使用npm模块，操作步骤如下图所示，勾选使用npm模块选项

---

顺带附上如何在页面下引用UI组件：

我们以使用一个button组件为例

1.首先app.json下需要定义全局组件的引入配置，如下图所示

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

---

2.打开我们需要使用到button组件的界面，我们以模板项目下的index页面为例，打开页面并在需要使用到的地方加入如下标签（具体标签引用方式可以参照官网文档）官网文档

主要按钮

ctrl + s 后，页面即可出现刚才引用的button组件效果，大致效果如下图所示

---That's all. 如有写的不好的地方，请不吝指出，多谢阅读。