移端适配

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

参考：

vue 项目移动端适配的方法

vue-cli 配置移动端自适应 flexible.js

vue-cli3.0 结合 lib-flexible、px2rem 实现移动端适配，完美解决第三方 ui 库样式变小问题

flexible.js

使用 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"
/>

postcss

但是如果你使用其他样式 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,
          }),
        ],
      },
    },
  },
};