Some components of the small program sometimes can not meet some of our needs , This is the time to introduce vant ui The component of is a good choice , Let's talk about using this in detail today vant ui The twists and turns of life ....
1. Open the terminal in the small program first , use npm init -y Command initialization , generate package.json file
2. install vant ui rely on
# adopt npm install npm i @vant/weapp -S --production
3. Click on the details in the upper right corner , Check use in local configuration npm modular
design sketch ：
3. according to vant ui Official website requirements package.json and node_modules Must be in miniprogram Under the directory ; So we use tools to make it automatic
Operation steps ： Click on the tool at the top left , Choose to build npm
Effect picture of successful operation ：
This is what your project is like ：
So introduce vant ui We'll do a good job .
Next, let's talk about how to use it
1. I need your help now app.wxss Introducing global styles into files
@import '@vant/weapp/common/index.wxss';
2. And then again index.json Or other documents json Of usingComponents Introduce components in
for example ：
// adopt npm install { "usingComponents": { "van-button":
"/miniprogram_npm/@vant/weapp/button/index" } }
notes ： The component path written here is in use npm Generated miniprogram Found in folder
3. After introducing components , You can be in the wxml Use components directly in
<view> <van-button type="primary"> Button </van-button> </view>
Finally, introduce the effect of components ：
In fact, I made a mistake for the first time ：
The reason for this error is ： I didn't perform the build npm That step , hold package.json and node_modules Copy in miniprogram Under the directory .
That's all for today . You can all try
Technology