vue中使用flexible.js并配合px2rem-loader实现移动端布局

适配移动端flexible.js

适用于最新版vue-cli,配置手淘的lib-flexible.js和rem实现移动端页面自适应

1.安装lib-flexible.js

npm install lib-flexible --save

2.在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

3.px转换rem

使用 webpack 的 px2rem-loader,自动将px转换为rem 
安装px2rem-loader

npm install px2rem-loader --save-dev

4.配置px2rem-loader

首先找到 build/utils.js文件，在utils.js中添加如下配置

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap,
      importLoaders:2 //添加一行
    }
  }
  const px2remLoader = {
    loader:'px2rem-loader',
    options:{
      remUnit:75
    }
  }
  

找到generateLoaders方法，在函数里如下配置 

这里最重要的就是要在上图两个位置都要加上px2remLoader，不然不会起作用！！！

5.px2rem 用法

安装px2rem后，再使用px上有些不同，大家可以参考px2rem官方介绍，下面简单介绍一下。

• 直接写px，编译后会直接转化成rem —- 除开下面两种情况，其他长度用这个
• 在px后面添加/no/，不会转化px，会原样输出。 — 一般border需用这个
• 在px后面添加/px/,会根据dpr的不同，生成三套代码。—- 一般字体需用这个

示例代码 
编译前（自己写的代码）

.example{
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}

编译后

.example{
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}

这样基本配置就完成了，重启项目就可以使用lib-flexible+rem编写移动端页面了

注意：vue移动端 border 或分割线中的 1px 不希望被转成 rem，只要再后面写上注释 /*no*/ 就可以了

 参见：https://blog.csdn.net/Coding_Jia/article/details/78866220

 

npm相关

• npm -v：查看 npm 版本。
• npm list：查看当前目录下都安装了哪些 npm 包。
• npm info 模块：查看该模块的版本及内容。
• npm i 模块@版本号：安装该模块的指定版本。

 在平时使用 npm 安装包的过程中，你可能需要知道一些 npm 基本知识：

• i/install：安装。使用 install 或者它的简写 i，都表明你想要下载这个包。
• uninstall：卸载。如果你发现这个模块你已经不使用了，那么可以通过 uninstall 卸载它。
• g：全局安装。表明这个包将安装到你的计算机中，你可以在计算机任何一个位置使用它。
• --save/-S：通过该种方式安装的包的名称及版本号会出现在 package.json 中的 dependencies 中。dependencies 是需要发布在生成环境的。例如：ElementUI 是部署后还需要的，所以通过 -S 形式来安装。
• --save-dev/-D：通过该种方式安装的包的名称及版本号会出现在 package.json 中的 devDependencies 中。devDependencies 只在开发环境使用。例如：gulp 只是用来压缩代码、打包的工具，程序运行时并不需要，所以通过 -D 形式来安装。