Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

I like to use Vantrepep’s component library when DEVELOPING wechat mini-programs. Through the introduction of components for rapid development, but in the use of wechat development tools will encounter various problems, such as wechat development tools terminal can not input content, NPM can not start commands and so on some problems, today I try to write down my solution. One way to normally use Vantapp.com is how I do it.

Introduction of component libraries

1. Install through NPM

Yarn add @vant/ appellate --production install version 0.x NPM I vant-weapp -S --productionCopy the code

Note: Due to the structure of the miniprogram_npm directory created by the new version of the developer tool, the file directory built by NPM is miniprogram_npm, and the development tool will create the file name of miniprogram_npm in the current directory by default. So the new version of miniprogramNpmDistDir can be set to ‘./’

Then open — Tools — and select Build NPM

Then select Details — Local Configuration — check the NPM module

Modify the app. Js

Json “style”: “v2” removed, the new version of the basic components of the small program forced to add many styles, difficult to cover, do not close will cause some component style disorder.

This is how vanteapp.com uses vanteapp.com, but sometimes you will find that terminals do not work or fail to generate package files when you click NPM to build.

2. Introduce vantrepep dependent packages directly based on the files provided on the official website

The file directory built in NPM is miniprogram_npm, so we create a new folder miniprogram_npm, as shown below

Then we can directly import the vanteapp-dependent files

So I can use it.

But sometimes we can’t get the new dependency package file and configuration file directly. We find the sample project on the official website, download the sample project, and then import the corresponding file into our own project for use.

Use component libraries

Using the Button component as an example, you only need to configure the path for the Button in app.json or index.json.

Note All component documentation uses the NPM installation as an example. If you are using @vant/ retry by downloading source code, change the path to the same directory that @vant/ retry is in.

// App. json "usingComponents": {"van-button": "@vant/ app.app.com "}Copy the code
/ / / / app. Download the source code to use es6 version json "usingComponents" : {" van - button ":"/path/to / @ vant weapp/dist/button/index "}Copy the code

That would allow the app to use the Vantrepep component library in its programs.