1、安装lib-flexible

执行命令：npm i lib-flexible --save命令执行完毕时，即成功安装了lib-flexible
2、在项目入口文件main.js中引入lib-flexible
import 'lib-flexible/flexible.js'
3、在项目根目录下的index.html头部加上手机端适配的meta的代码
<meta name = "viewport" content="width=device-width,initial-scale=1.0">
4、安装px2rem-loader
在实际的开发中，使用flexible插件时，会自动把px转换成rem单位。在vue-cli中安装过lib-flexible之后，将px转换成rem单位，我们将使用px2rem这个工具，它具有webpack的loader: https://github.com/Jinjiang/px2rem-loader (这个是px2rem-loader的github地址)
px2rem-loader的安装命令：
npm install px2rem-loader

5、配置px2rem-loader
在vue-cli生成的webpack的配置中，veu-loader的options和其他样式文件loader最终都是由build/until.js里的一个方法生成的

我们只需要在cssLoader后面加上一个px2remLoader即可，px2rem-loader的remUnit选项的意思是1rem = 多少像素，结合lib-flexible,我们将px2remLoader的option.remUnit设置成设计稿宽度的1/10，这里我们假设设计稿的宽度是750px,并将px2remLoader放进loader数组中

  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap,
      importLoaders: 10 //在css-loader前应用loader的数目，默认为0
      //如果不加这个，@import的外部css文件将不能正常转换
      //如果还不行，试着调大数字
      //记住：更改后必须重启项目否则不生效
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options:{
      remUnit: 75//设计稿的1/10，假设设计稿是750px
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
   // const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    const loaders =[cssLoader, px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

6、重启该项目，在组件中写单位直接写成px，通过浏览器检查就可以看到单位是rem

    注意：在项目的实际开发中，有时候我们不需要把px转为rem，比如用到div的边框时，

.div{
    border: 1px solid red;/*no*/  /*此时1px单位不会转换成rem*/
width: 750px;//可以看得到px单位被转为rem
}