vue移动端适配完整过程!

1.假设当前已经使用vue-cli搭设好项目

2.安装 flexible

 npm i lib-flexible

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

import 'lib-flexible'

4. 去掉目标文件的index.html头里的meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
//不要写上边这行meta，flexible会为根据屏幕自动给加上，如果你自己加了，
那么flexible会根据你加的值来计算，也就会出现固定的值，安卓和苹果都会一样了。

5.安装px2rem-loader

npm install px2rem-loader --save

6.在bulid文件下的utils.js文件下配置px2rem-loader(对比原代码)

const cssLoader = {
loader: 'css-loader',
options: {
  minimize: process.env.NODE_ENV === 'production',
  sourceMap: options.sourceMap
 }
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
  remUnit: 75  //1rem=多少像素 这里的设计稿是750px。
 }
}
function generateLoaders (loader, loaderOptions) {
	const loaders = options.usePostCSS ? [cssLoader, px2remLoader] : [cssLoader]
 ...
}

7.注意

1. 记得样式初始化(各标签的盒模型的值得初始化)
2. 修改flexible源码
   
   在这里将框起来部分去掉(适配各种屏幕包括大屏)或者将540改成所要适配的最大屏
3. 如果使用第三方ui库,记得列的宽度加起来不能超过最小屏幕宽度(否则出现滚动条)
4. 不想输出rem时
   直接写px，编译后会直接转化成rem ---- 除开下面两种情况，其他长度用这个
   在px后面添加/no/，不会转化px，会原样输出。 — 一般border需用这个
   在px后面添加/px/,会根据dpr的不同，生成三套代码。---- 一般字体需用这