About a year ago when the micro channel small program, the boss said to use the UI framework, and then tried a few, the feeling is not satisfactory, I am not just, a simple analysis.

  1. WeUI(Development document:Github.com/Tencent/weu…) Although it looks simple to use, but from the perspective of development, the document is not direct enough, the use is not very convenient, another is if you want to enrich the beautiful UI effect, need to modify the style of WeUI or custom CSS, give up decisively
  2. iView Weapp(Development document:Weapp.iviewui.com/docs/guide/…UI components are relatively rich, but the fly in the ointment is that the page style is relatively fixed and difficult to modify. Input boxes often fail to be entered in the simulator and the user experience is extremely poor
  3. ColorUI(Development document reference:www.color-ui.com) Enenen, the visual effect is very beautiful, can be tailored to their own needs, directly modify or overwrite CSS styles. Is the lack of documentation 😶… More advertising just 😶… That of course choose to forgive it, after all open source is not easy, or to support the 👍
  4. TaroUI(Development document:taro-ui.jd.com/#/) this does not say much, each guest officer knows it is powerful on the line, a set of code multi-terminal operation, cattle batch 👍. However, ———— is difficult to get started, and it is difficult to locate problems in development. If used in micro channel small program development, overqualified, how to kill chicken with slaughter ox knife!
  5. Vant Weapp(Youzan. Making. IO/vant weapp /…The visual effects are not the best, but the documentation is more detailed. The only disadvantage is that it relies on Vue development. It is not recommended for those unfamiliar with Vue

Ok, let’s get down to business 👉

The first time according to the official website instructions to install the Vant framework of the process can be described as 9981 difficult, I call good guy, almost from the entry to give up 😮 after I grilled official documents and a variety of online various pit tutorials, the end is running up. Since I wasn’t in the habit of documenting problems at the time, and until recently had to use this framework, I decided to bury the hole. I’m not going to go through all the steps on the official website, but you can experiment on your own. Then operate 👉

1. The default file after the project is created is shown in the figure above

2. Open terminal inputnpm init. When you’re done, your project will have a name in the root directorypackage.jsonThe file 3.npm install --production. The root directory is namedpackage-lock.jsonThe file

4.npm i @vant/weapp -S --productionornpm i vant-weapp -S --production

Note the difference between NPM I app-eapp-s –production and NPM I @vant/ eapp-s –production. NPM i@vant/app.json – app.json – app.json – app.json – app.json – app.json

{
"usingComponents": {
  "van-button": "@vant/weapp/button/index"}}Copy the code

Using NPM I ant-downloadp installation requires changing the path when introducing components in app.json or index.json

{
  "usingComponents": {
    "van-button": ".. /.. /miniprogram_npm/vant-weapp/button/index"}}Copy the code

4. Use the wechat developer tool to build NPM, click inside the tool to build NPM

One will be generated after the buildminiprogram_npmfolder

One important point: if it is the latest version of wechat development tools, directly building NPM is not successful

Vant official explanation 👉 👀 will app.json"style": "v2"Remove, the new version of the basic component of the small program forced to add many styles, it is difficult to cover, do not close will cause some component style chaos. 👀 modify the project created by the developer tool project.config.json, miniprogramRoot defaults to miniProgram, package.json is outside of it, and the NPM build does not work properly. You need to manually add the following configuration to project.config.json so that developer tools can properly index to NPM dependent locations. {..."setting": {..."packNpmManually": true."packNpmRelationList": [{"packageJsonPath": "./package.json"."miniprogramNpmDistDir": "./miniprogram/"}}} 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 is configured as'/'Can beCopy the code

Once you’re done, build again

5. Use button components in Vant to import components in app.json or index.json. It is recommended to import common components in app.json and index.json in each file to import components that are used separately in that file

Import component {"usingComponents": {
    "van-button": "@vant/weapp/button/index"}} Use <view> in WXML<van-button type="primary">button</van-button>
</view>
Copy the code

Next, the renderings

The force has been installed, good day!