1. Install Lib-Flexible and PostCSS-Pxtorem first

You can install it directly by following the following command (be sure to strictly control the version number, NPM install [email protected] [email protected] –save-dev or CNPM install [email protected] [email protected] –save-dev (this is for the installation method configured with Taobao mirror)

2. Carry out some configuration in the project

Create a vue.config.js file in my project root directory.

Const resolve = dir => require('path'). Join (__dirname, Let publicPath = '/' module.exports = {publicPath: publicPath, // Modify lintOnSave for your needs: PublicPath: publicPath, publicPath: baseUrl {/ / test environment '/ ZR: {target:' http://10.111.113.8:8086 ', / / test / / target: 'http://122.114.247.4:8769', / / formal changeOrigin: true, pathRewrite: {' ^ / ZR: '}}}}, CSS: SourceMap: false, loaderOptions: {CSS: {// options here will be passed to CSS-loader}, postcss: { // options here will be passed to postcss-loader plugins: [require('postcss-pxtorem')({ "rootValue": 192, // 1/10 width of the design, (no comments in JSON file, line comments and downlink comments are removed) "propList": [" * "] / / need to do conversion processing properties, such as ` hight `, ` width `, ` margin `, ` * ` said all}}}})],}Copy the code

This is my simple configuration in vue.config, the most important of which is the configuration in the CSS object.

3. Introduce lib-flexible

Import ‘lib-flexible/flexible’ from main.js

4, also need to modify a pit

Because lib-flexible is for mobile terminals, but I am using it on PC terminals, so it will be invalid if I use it directly. It took me a long time to find out that I need to modify the source code of this plug-in. In node_modules – > lib – flexible – > flexible. Js \

Find the refreshRem function and change it to the following (comment out the “if” in the refreshRem function)

After completing the above steps, you can use the PX layout directly in your project like this.

Note: if the project is reinstalled, the flexible.js section will also need to be reconfigured.