适配

HTML5 router History模式
https://router.vuejs.org/zh/guide/essentials/history-mode.html

devtools （针对vue的开发工具）

（1） 为什么要适配？
为了使同一个页面在不同尺寸的移动端上显示相同的效果，我们需要采用适配，而不需要为了适应不同尺寸的移动端，做不同的页面。
（2）有哪些适配的方案？
响应式布局、rem。
（3）在项目中怎么使用？

响应式布局

image.png
image.png image.png

现在我们使用以下的方法去设置

image.png
项目中使用
第一步：
image.png
第二步：
配置webpack

import 'lib-flexible/flexible'

image.png

具体的步骤总结如下
vue-cli3用rem进行适配步骤:

1. 安装手淘的flexible,插件名称叫amfe-flexible

npm i amfe-flexible --save-dev

再安装

npm i postcss-pxtorem

2. 在main.js导入

import 'amfe-flexible'

3. 在/vue.config.js添加px2rem插件,把项目中的px转为rem

const autoprefixer = require("autoprefixer");
const pxtorem = require("postcss-pxtorem");
const path = require("path");

const themePath = path.resolve(__dirname, "src/assets/style/theme.less");

module.exports = {
  // 关闭eslint检查
  lintOnSave: false,
  // 配置css前缀,px转rem
  css: {
    loaderOptions: {

      // vant换主题
      less: {
        modifyVars: {
          hack: `true; @import "${themePath}";`
        }
      },
        // 后处理器配置
      postcss: {
        plugins: [
          // 配置样式前缀
          autoprefixer(),
          // 把px转为rem
          pxtorem({
            rootValue: 37.5,
            propList: ["*"]
          })
        ]
      }
    }
  },

  configureWebpack: {
    externals: {
      axios: "axios" // 配置使用CDN
    }
  }
};

VuePress 中文文档 | VuePress 中文网
https://www.vuepress.cn/guide/#%E8%BF%90%E8%A1%8C%E5%8E%9F%E7%90%86-how-it-works