移端适配

最关键的就是 css的适配，推荐使用 rem 作为单位。并使用 postcss-px2rem 把px 转换为 rem

参考：

vue项目移动端适配的方法
vue-cli配置移动端自适应flexible.js
vue-cli3.0结合lib-flexible、px2rem实现移动端适配，完美解决第三方ui库样式变小问题

使用 flexible.js 配置移动项目 meta标签

• npm

  npm install lib-flexible --save-dev

• main.js 引入

  import 'lib-flexible/flexible.js'

• html head标签中 加入

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

但是如果你使用其他样式ui框架，ui框架组件会变小

• 卸载 postcss-px2rem 安装 postcss-px2rem-exclude

npm  uninstall postcss-px2rem --save-dev
npm  install postcss-px2rem-exclude --save

• 新增 postcss.config.js

  module.exports = {
    plugins: {
      autoprefixer: {},
      'postcss-px2rem-exclude': {
        remUnit: 75,
        exclude: /node_modules/i
      }
    }
  }

不使用其他ui框架 直接安装 postcss-px2rem 配置使用即可

• vue.config.js 中配置

  module.exports = {
    css: {
      loaderOptions: {
        css: {},
        postcss: {
          plugins: [
            require('postcss-px2rem')({
              // remUnit => 设计搞w / 10
              remUnit: 75
            })
          ]
        }
      }
    }
  }