Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

preface

Now the front-end technology to the development of the framework, the use of the framework to improve the efficiency of our coding and performance optimization, the same CSS style is also more and more high requirements, today I want to introduce you is the hot front-end UI framework Vant UI component library

introduce

Vant is the open source mobile component library of Uzan front-end team. It was opened in 2017 and has been maintained for 4 years. Vant carries all the core business of Yizan internally and serves more than 100,000 developers externally. It is one of the mainstream mobile terminal component libraries in the industry.

Vant applet component use and example

1. Self-packaged Gitee VantLinks:Vant – contrib. Gitee. IO/vant / # / useful – C… Click to switch applets Once the switch is successful, you will see the applet Ul component library

In this way, we successfully switch to the UI component library used in wechat applet. The following are the specific implementation steps

Two, small program WeUl component library

1, create folder open CMD, in the applet root directory, initialize NPM

npm init -y
Copy the code

2. Run the following command to install NPM:

Take wechat official WEUI component library as an example

npm install --save weui-miniprogram
Copy the code

3. After installation, in the menu bar of wechat developer tools: details —– use NPM module —– tool —— to build NPM:

4. App.wxss introduces global styles

@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
Copy the code

5. Take the index of Pages as an example, add cell into JSON:

{
	  "usingComponents": {
		    "mp-cell": ".. /.. /miniprogram_npm/weui-miniprogram/cell/cell "}}Copy the code

Introduce built-in styles into app.wXSS

@import '@vant/weapp/common/index.wxss';
Copy the code

Example: add “search box” to index.json, add component to index.json

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

C+V components in index.wx. HTML

Practice and trample pits

1, small program and Vue introduction of the difference, the introduction of each component is introduced on demand, otherwise it cannot take effect, and Vue is a direct introduction, no need to introduce on demand, please remember friends.

2, the button introduced by the applet will be enlarged and spread all over, we just need to add the attribute size=”mini”

3. Our UI styles are all named after class, and some of them don’t meet our requirements. We can find and weight them to change to the style we need

Four, thinking

Such a UI component library can provide us the vast majority of the style of the front-end development demand, of course to get a better is our Vant library as an example to encapsulate the UI style, through the way of component in our project implementation, radically reduce our performance optimization, and improve our technical point, is not just for reuse, More is that we understand its principle and compatibility, well this issue to share here, we work together on the front end of the road!!