Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What is vant weapp?

2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article mainly introduces "what is vant weapp". In daily operation, I believe many people have doubts about what vant weapp is. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what is vant weapp?" Next, please follow the editor to study!

VantWeapp is a Mini Program version of Vant, a mobile component library. Based on the same visual specification, they provide a consistent API interface to help developers quickly build Mini Program applications.

Installation of VantWeapp

Step 1 install via npm

It should be noted that package.json and node_modules must be in the miniprogram directory

# install via npm

# install via yarn

# install version 0.x

Npmivant-weapp-S--production

Step 2: build the npm package

Open Wechat developer tools, click tools-> build npm, and check the option to use npm module. After the construction is completed, you can introduce components.

Step 3 modify tsconfig.json

If you use typescript to develop Mini Program, you need to add the following configuration to tsconfig.json to prevent the tsc compilation error from being modified to the directory in the project where @ vant/weapp is located after npm is built.

{

"compilerOptions": {

"baseUrl".

"paths": {

}

}

}

Step 4 modify app.json

Remove the "style": "v2" in app.json, Mini Program's new version of the basic components forced to add a lot of styles, difficult to remove, do not close will cause some component style confusion.

Example project

We provide a sample project, which will help you understand the following:

Build Mini Program application based on VantWeapp

Style overlay scheme

Use

Introduction of components

Take the Button component as an example, you only need to configure the path corresponding to Button in app.json or index.json. If you are using @ vant/weapp by downloading the source code, change the path to the directory where @ vant/weapp is located in the project.

/ / install via npm

/ / app.json

"usingComponents": {

Van-button: @ vant/weapp/button/index

At this point, the study of "what is vant weapp" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report