title: 使用vue-cli3.0搭建适配移动端的项目 #文章页面上的显示名称，一般是中文 date: 2019-11-20 15:30:16 #文章生成时间，一般不改，当然也可以任意修改 categories: h5 #分类 tags: [vue,移动端] #文章标签，可空，多标签请用格式，注意:后面有个空格 description: 使用vue-cli3.0搭建适配移动端的项目

使用vue-cli3.0搭建适配移动端的项目

适配移动端，禁止用户缩放页面

meta标签中的content属性里有一个width=device-width的值，这个值就是用来告诉浏览器，该页面将要使用设备的宽度来解析，后面的属性值则是告诉该页面：    

user-scalable=no 禁止用户缩放页面

initial-scale=1.0 页面初始倍数为1倍

maximum-scale=1.0 页面可放大的倍数为1倍

minimum-scale=1.0 页面可缩小的倍数为1倍

PS：meta属性一样作用与Pad平板设备

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>

vue-cli3.0结合lib-flexible, px2rem 实现移动端适配。

第一部分：项目中引入 lib-flexible

1.项目中安装 lib-flexible

npm install lib-flexible --save

二、在项目的入口 main.js 文件中引入 lib-flexible

import 'lib-flexible'

第二部分：使用postcss-px2rem自动将css中的px转换成rem

1.安装 postcss-px2rem

npm install postcss-px2rem --save-dev

2.项目部署 postcss-px2rem

在 vue.config.js 中配置（如果没有自己手动创建）

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        // 这是rem适配的配置  注意： remUnit在这里要根据lib-flexible的规则来配制，如果您的设计稿是750px的，用75就刚刚好。
        plugins: [
          require('postcss-px2rem-exclude')({
            remUnit: 75
          })
        ]
      }
    }
  }
}