I’ve been doing this for a long time today. I even doubt life. Let’s do it
There are two main ways to introduce vant UI, the first is to use NPM, and the second is to use download method. Currently, Vant already supports NPM mode, but because the code in node_modules directory will not be programmed into dist directory, so you can only use Git mode for the moment
I found a lot of examples and tried to use NPM, but gave up halfway, mainly because there is no decent example, so I’ll just follow me to download the source code from git repository
Step 1 Download vant-retry p locally
Git clone https://github.com/youzan/vant-weapp.git to a folder, open look, is there a vant – weapp file has been downloaded, and then open the folder inside a dist files… That’s the first step
Step 2 create folders in your own mini-program
Create a folder called vant under the static file in your mpvue applet project (whatever you want to call it, just to introduce path names later).
The third applet project introduces vant code
Copy everything involved in the dist file in Step 1 and put it in the vant file you created in Step 2. Then run NPM run dev
Step four: Oh, my God
Error Example 1
This means you need to convert ES6 to ES5
Error Example 2
or
Until the above error, I switched to debug the basis of different libraries, find every mistake is different, but in the end is a problem, in the project I use async and await, my understanding is that the developer tools don’t think is es6 contents but es8, so asked WeChat developer tools, so the hook enhanced compilation.
Step 5 How to use it
5.1 If you want to use it on any page, each module will have a corresponding main.json file. In this case, I will introduce the component that was just at the bottom of the vant file
"van-button": "/static/vant/button/index"Can your path find the corresponding button file? If you can’t find it, take your own path
5.2 Writing component names
5.3 the effect
Do the front end of the day to study hard! Happy life, refueling, mutual encouragement
