1、安裝lib-flexible

執(zhí)行命令：npm i lib-flexible --save命令執(zhí)行完畢時，即成功安裝了lib-flexible
2、在項(xiàng)目入口文件main.js中引入lib-flexible
import 'lib-flexible/flexible.js'
3、在項(xiàng)目根目錄下的index.html頭部加上手機(jī)端適配的meta的代碼
<meta name = "viewport" content="width=device-width,initial-scale=1.0">
4、安裝px2rem-loader
在實(shí)際的開發(fā)中，使用flexible插件時，會自動把px轉(zhuǎn)換成rem單位。在vue-cli中安裝過lib-flexible之后，將px轉(zhuǎn)換成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選項(xiàng)的意思是1rem = 多少像素，結(jié)合lib-flexible,我們將px2remLoader的option.remUnit設(shè)置成設(shè)計(jì)稿寬度的1/10，這里我們假設(shè)設(shè)計(jì)稿的寬度是750px,并將px2remLoader放進(jìn)loader數(shù)組中

  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap,
      importLoaders: 10 //在css-loader前應(yīng)用loader的數(shù)目，默認(rèn)為0
      //如果不加這個，@import的外部css文件將不能正常轉(zhuǎn)換
      //如果還不行，試著調(diào)大數(shù)字
      //記?。焊暮蟊仨氈貑㈨?xiàng)目否則不生效
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options:{
      remUnit: 75//設(shè)計(jì)稿的1/10，假設(shè)設(shè)計(jì)稿是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、重啟該項(xiàng)目，在組件中寫單位直接寫成px，通過瀏覽器檢查就可以看到單位是rem

    注意：在項(xiàng)目的實(shí)際開發(fā)中，有時候我們不需要把px轉(zhuǎn)為rem，比如用到div的邊框時，

.div{
    border: 1px solid red;/*no*/  /*此時1px單位不會轉(zhuǎn)換成rem*/
width: 750px;//可以看得到px單位被轉(zhuǎn)為rem
}