Vue project builds and configures mobile terminal adaptation

bold style

1. Development environment installation

npm install -g cnpm --registry=https://registry.npm.taobao.org  全局安装淘宝镜像

cnpm install --global vue-cli
vue init webpack my-project
cd my-project 
cnpm install 
cnpm run dev

2. Use rem layout and install flexible

npm i lib-flexible --save

3.Introduce lib-flexible in main.js

  import 'lib-flexible'

4. Add the meta tag to the root directory index.html

<meta name='viewport' content='width=device-width,initial-scale=1.0'>

5. Convert px to rem and install px2rem-loader

  npm i px2rem-loade --save-dev

6. Configure px2rem-loader build/utils.js

var cssLoader = {
  loader: 'css-loader',
  options: {
    minimize: process.env.NODE_ENV === 'production',
    sourceMap: options.sourceMap
  }
}
var px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 100
  }
}
function generateLoaders(loader, loaderOptions) {
  var loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
}

7. When using px2rem to externally reference css, px is not converted to rem, so it needs to be in node_modules

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width /7.5;   //将10改为7.5
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

This is the setup. External css should use 1re100px, and internal css should be automatically compiled using px directly.