Vue-cli3.0 combines lib-flexible and PX2REM to achieve mobile end adaptation, which perfectly solves the problem of smaller third-party UI library style. I completed a mobile end project from frame building to front-end development independently. I used to do media query for mobile end adaptation, but I want to use other adaptation solutions this time. Then the vuE-Cli3.0 combined with lib-flexible, PX2REM to achieve mobile end adaptation scheme, the development process also encountered some pits, their own choice of scheme to fill pits. The following is the record of my project frame building and pit filling scheme.
Setup can be referred to my other article vue-CLI 3.0 setup project flow, which will not be explained here. The following describes the adaptation scheme after the successful construction of the project.
Part 1: Introducing Lib-flexible into your project
Install lib-Flexible in the project
NPM install lib-flexible –save 2, introduce lib-flexible in main.js
Import ‘lib-flexible’ Part 2: Automatically convert PX in CSS to REM using postCSS-px2REM
Postcss-px2rem install postCSS-px2REM install postCSs-px2REM install postCSs-Px2REM install postCSs-Px2REM
NPM install postcss-px2rem –save-dev postcss
At the beginning of the project, I configured it in vue.config.js (there is no such JS file initially after the project is created, so I need to manually create it myself) and put on the code
Module.exports = {CSS: {loaderOptions: {postcss: {// This is the remUnit for REM adaptation: it saves it here according to the lib-flexible rules, and if your design saves for 750px, 75 will be just fine. plugins: [ require(“postcss-px2rem”)({ remUnit: 75})]}} the initial adaptation is complete, and you can write the styles in px units directly in CSS or.vue files, and the browser will automatically convert to REM.
Because the preliminary project arrangement is not too rushed, the UI design drawing is relatively simple, so I wrote the button components and so on, the adaptation is very good, I feel great ~
Until the subsequent design of the UI shows up in plug-ins, then vant’s component library is introduced.
Put a simple cell component, NPM Run serve project run up, I want to cry O (╥﹏╥) O, components in the style are small, F12 look and sure enough the component style is also converted to REM.
The problem
The main reason for the smaller size is that the third library CSS is written according to the size of data-dPR =”1″
One of the solutions offered on the web is to rewrite the style of the third-party library, and another is to make Flexible not compile the file of the third-party library (ignore the UI component library style file).
Solution 1: Copy the CSS files of third-party components and enlarge the PX of the CSS code of the third-party library by two times, or replace PX with PX /no/ by global replacement. I don’t think the solution is not very good use, specific operation can refer to the following two articles: segmentfault.com/a/119000001… And blog.csdn.net/weixin_4246…
Postcss-px2rem-exclude: exclude postCSS-px2REM-exclude: exclude postCSS-px2REM-exclude: exclude postCSS-px2REM-exclude: exclude postCSS-px2REM-exclude: exclude postCSS-px2REM-exclude: exclude postCSS-px2REM-exclude: exclude postCSS-px2REM-exclude: exclude First, you need to uninstall PostCSS-px2REM in your project. NPM uninstall postCSs-px2REM –save-dev Install postCSs-px2REm-exclude
NPM install postcss-px2REm-exclude –save and configure the exclude option. Note that this configuration does not work in vue.config.js, as shown in the figure below.
The correct configuration location is the postcss.config.js file in the project root directory. If your project does not generate this separate file, you need to set it in your package.js.
Copy the code postcss.config.js
module.exports = { plugins: { autoprefixer: {}, “postcss-px2rem-exclude”: { remUnit: 75, exclude: /node_modules|folder_name/i } } }; Copy the code copy the code package.json
“postcss”: { “plugins”: { “autoprefixer”: {}, “postcss-px2rem-exclude”:{ “remUnit”: 75, “exclude” : “/ node_modules | floder_name/I”}}}, copy the code ok, completed.
The above is my pothole filling experience of this project. I hope it will be useful to you and you can avoid some detours