[WeChat Mini Program] How to import vantUI components in the Mini Program

Simply record how to introduce the vantUI component into the WeChat applet (valid for pro-test)

1. Take a new WeChat applet project as an example. After creating a new applet, open the WeChat developer tool
   
   Enter in the opened terminal
   npm i @vant/weapp -S --production
   Press enter

---

At this point, a node_modules folder will appear under the project root path, as shown in the following figure

If the folder does not appear, you can click the refresh button on the directory folder to refresh the list

---

2. After completing the node_modules dependency installation, you need to modify the app.json file as follows

Delete the selected part in the above picture

---

3. Create a new package.json file in the project root directory, the file location and file content are as follows

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

---

4. Follow the steps shown in the figure below to perform the npm operation

---

5. After npm is completed, a miniprogram_npm folder will appear under the project root path, as shown in the figure below, which means the build is successful

---

6. Configure the applet to use the npm module, the operation steps are as shown in the figure below, check the use npm module option

---

Incidentally, how to reference UI components under the page:

Let’s use a button component as an example

1. First, you need to define the import configuration of global components under app.json, as shown in the following figure

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

---

2. Open the interface that we need to use the button component. Let's take the index page under the template project as an example, open the page and add the following tags where you need to use it (for specific tag reference methods, please refer to the official website document) official website document

<van-button type="primary">主要按钮</van-button>

After ctrl + s, the button component effect just quoted will appear on the page. The approximate effect is shown in the figure below

---That's all. If there is any bad writing, please feel free to point it out, thank you for reading.