Shulou(Shulou.com)06/02 Report--

This article shows you what are the concrete steps of using the vant framework in WeChat Mini Programs. The content is concise and easy to understand. It will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

1. When it comes to the vant framework, I believe we are no stranger to it. Friends who have done mobile development should all know it.

2.Vant is an open source mobile component library with likes from the front-end team. It was opened in 2017 and has been maintained for 4 years. Vant, which hosts all the core businesses internally and serves more than 100,000 developers externally, is one of the mainstream mobile component libraries in the industry.

3. Let's not talk much nonsense and go straight to today's topic. How can we use the vant component library in WeChat Mini Programs!

Next, I will tell you how I install and use the vant UI component library.

1. Open our Mini Program project directory, and then open the location of the file.

two。 Initialize the project file

Here, I initialize through the cmd window.

3. Enter the command npm init to initialize the project

At this point, you will find that your directory has more package.json files.

4. Installation dependency

4.1 install vant/weapp through npm

Npm I @ vant/weapp-S-- production

4.2 install miniprogram

Npm I miniprogram-sm-crypto-- production

After installation, you will find more files in your directory.

4.3 modify app.json

The "style": "v2" in app.json is removed because the new version of Mini Program's basic components are forced to add a lot of styles, so it is difficult to cover them. If you do not close them, you will cause some component styles to be confused.

4.4 modify project.config.json

For projects created by developer tools, miniprogramRoot defaults to miniprogram,package.json outside, and npm builds do not work properly. The following configuration needs to be manually added to the project.config.json so that the developer tool can correctly index to the location on which the npm depends.

{... Setting: {. "packNpmManually": true, "packNpmRelationList": [{"packageJsonPath": ". / package.json", "miniprogramNpmDistDir": ". / miniprogram/"} 4.5 build npm We click on the toolbar in the upper left corner

After the construction is successful, the following screen appears

4.6 then click on the details in the upper right corner-Local settings-use the npm module

5. Working with components

Here I register a button in the global and then use it. Register in app.json first.

Here I'll find a random page to use this button component.

You can see that I used it successfully.

What are the specific steps for WeChat Mini Programs to use the vant framework? have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.