This is the fifth day of my participation in the August More Text Challenge.

Recently, WE need to develop the H5-end project, which is built based on Vue Cli4 (Vue, VUE-Router and VUex have been introduced).

About mobile UI library selection

Three mobile UI libraries of Mint-UI, Cube-UI and Vant were selected during the investigation of technical scheme.

mint-ui

It is a mobile TERMINAL UI library based on vue.js developed by ele. me team. The project maintenance update is stuck in 2018. It seems that there has been no maintenance or update in recent years, worrying that components will encounter problems that are difficult to resolve. So I decided not to use it for now.

cube-ui

Cube-ui is a sophisticated mobile component library based on vue.js. It is condensed and refined from Didi’s internal component library, and has experienced the test of business for more than a year. Moreover, each component has sufficient unit test to provide guarantee for subsequent integration.

Vant

Vant is a Vue component library implemented by the uplike front-end team based on the uplike unified specification, providing a complete set of UI basic components and business components. Provides very friendly API development documentation and visual pages. Mall type of projects can be preferred.

Finally, after experiencing and reviewing their official documents, I decided to choose Vant. Let’s start with the entire process of using Vant.

The installation

Install via NPM

Select the corresponding mode according to the version of VUE. This project uses VUE 2.x

# Vue 3 project, install Vant 3: NPM I vant@next -sCopy the code

Installation by scaffolding

When using Vant in a new project, it is recommended to use the Vue Cli, the scaffolding provided by Vue, to create the project and install Vant.

After creating a project, you can use commands to open the graphical interface, as shown below in the Vue UICopy the code

Click as shownRely on -> Install dependenciesSearch,vantOnce found, add installation dependencies and wait a few minutes for the installation to complete. Then we can see in package.json file that it has been added successfully.

use

Mode 1: Automatically import components on demand (recommended)

Babel-plugin-import is a Babel plug-in that automatically converts the way import is written to import on demand during compilation. We choose this approach.

NPM I babel-plugin-import -dCopy the code
{"plugins": [["import", {"libraryName": "vant", "libraryDirectory": "es", "style": true}]]}Copy the code

Method 2: Manually import components as required

You can manually import the required components without using plug-ins.

import Button from 'vant/lib/button';
import 'vant/lib/button/style';
Copy the code

Method 3: Import all components

Vant supports importing all components at once, which increases the size of the code package and is therefore not recommended.

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);
Copy the code

Note: After importing configurations on demand, you are not allowed to import all components directly.

About the adapter

Since it is a mobile terminal project, adaptation is inevitable. The following two commonly used adaptation solutions are introduced.

Scheme 1: REM adaptation scheme

You need to use lib-flexible+ PostCSS-pxtorem, lib-Flexible is an open source library of Alibaba, used to set REM reference values. Postcss – Pxtorem is a postCSS plugin for converting PX units to REM units.

  1. Let’s start by installing them into the project’s development environment:
 npm i -D lib-flexible postcss-pxtorem
Copy the code
  1. Add in the project root directorypostcss.config.jsThe configuration is as follows
Module. exports = {plugins: {'postcss-pxtorem': {rootValue: 37.5, propList: ['*'],},},}; plugins: {'postcss-pxtorem': {rootValue: 37.5, propList: ['*'],},},};Copy the code

Once configured, you are ready to use it.

The viewPort unit is compatible with many browsers, so lib-Flexible is a transition solution that can be abandoned. Both current and previous versions have problems. It is recommended that you start using viewPort instead. So, the second option is introduced, and the second option is used in the project.

Plan 2: Viewpor

Postcss-px-to-viewport converts px to the viewport unit vw, which is essentially a percentage unit, 100vw equals 100%.

  1. Let’s start by installing it into the project’s development environment:
 npm i postcss-px-to-viewport -D
Copy the code
  1. Add in the project root directorypostcss.config.jsThe configuration is as follows
module.exports = { 
  plugins: { 
    'postcss-px-to-viewport': { 
       viewportWidth: 375
     }
   }
};
Copy the code

Once configured, you are ready to use it.

Compatible with third-party UI libraries

The vant component library is used and the configuration is provided on the official website, but it is based on the 375px design draft. The actual project design draft is 750px. In order to achieve the ideal effect, you can calculate by yourself and divide by 2.

1. Solution 1

In the configuration, set the base value to 750px and set exclude to ignore the node_modules directory.

Module. exports = {plugins: {autoprefixer: {}, // postcss-px-to-viewport: {plugins: {autoprefixer: {}, // postcss-px-to-viewport: {unitToConvert: "px", // the unitToConvert is viewportWidth: 750, // the width of the UI design is unitPrecision: 6, // the precision of the conversion is propList: ViewportUnit: "vw", // Specify the window unit to convert to, default vw fontViewportUnit: "Vw ", // specify the window unit to convert the font to, default vw selectorBlackList: ["wrap"], // specify the class name not to convert to the window unit, minPixelValue: MediaQuery: true, // whether the CSS code in the mediaQuery is also converted, the default is false replace: true, // whether to replace the attributes directly after the conversion, // exclude: [/node_modules/], // set ignore files, use re as the directory name to match landscape: false // Whether to handle landscape}}};Copy the code

2. Solution 2

Dynamically set baseline values

const path = require('path'); module.exports = ({ file }) => { const designWidth = file.dirname.includes(path.join('node_modules', '_vant')) ? 375-750; return { plugins: { autoprefixer: {}, "postcss-px-to-viewport": { unitToConvert: "px", viewportWidth: designWidth, unitPrecision: 6, propList: ["*"], viewportUnit: "vw", fontViewportUnit: "vw", selectorBlackList: ["wrap"], minPixelValue: 1, mediaQuery: true, exclude: [], landscape: false } } } }Copy the code

A word of caution: path.join(‘node_modules’, ‘_vant’) is used here because it is suitable for different operating systems and results in node_modules/_vant on MAC and node_modules\_vant on Windows

Friendly reminder: I used file.dirname.includes(path.join(‘node_modules’, ‘vant’)) to dynamically set viewportWidth to _vant. ^2.12.26 ^2.12.26 ^2.12.26 ^2.12.26 ^2.12.26 ^2.12.26 ^2.12.26 ^2.12.26

The attached

As for the UI library and adaptation scheme chosen by the project, it is necessary to make the best choice according to the situation of the project and the habits of the developers.