Vue脚手架3移动端适配

第一步：安装 1.全局安装脚手架3，记住在安装3的时候记得把脚手架2给删除 !import npm install -g @vue/cli
2. 下载脚手架 vue.create test 3.安装vant npm i vant -S （npm 下载） yarn add vant (yarn 下载) 第二步：引入组件 （推荐自动按需引入组件） ① 安装babel-plugin-import插件 babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式 （按需加载） 1.npm i babel-plugin-import -D 2.在babel.config.js中进行配置插件：

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

第三步：Rem 适配 1.安装插件 ①安装插件 Vant 中的样式默认使用px作为单位，如果需要使用rem单位，需要安装postcss-pxtorem、lib-flexible两个插件 postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem lib-flexible 用于设置 rem 基准值

npm install postcss-pxtorem --save-dev npm i -S amfe-flexible

创建vue-config.js配置：

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    autoprefixer(),
                    pxtorem({
                        rootValue: 37.5, //代表屏幕宽度是375px 按它得100%配置
                        propList: ['*'],
                        selectorBlackList: ['van-circle__layer']
                    })
                ]
            }
        }
    }
};

第四步：在main.js中引入amfe-flexible import 'amfe-flexible';