构建一个vue CLI 3.0＋vant的移动端自适应布局框架

前言：本项目采用vue脚手架3.0搭建，使用vant的UI框架，自适应布局依靠postcss-pxtorem+lib-flexible来实现 github

第一步：创建项目

vue create hmall

创建一个vue3.0的项目，一路enter过去，得到了一个初始的代码，对home页进行一些删改，输出页面：

第二步：安装lib-flexible

cnpm install lib-flexible --save

第三步：在main.js中引入lib-flexiblejs

import 'lib-flexible/flexible.js'

第四步：安装postcss-pxtorem

cnpm install postcss-pxtorem --save-dev

第五步：在根目录底下创建postcss.config.js文件

添加以下配置，然后重启项目，重启项目，重启项目

module.exports = {  
    plugins: {    
        autoprefixer: {},    
        "postcss-pxtorem": {      
            rootValue: 75, //结果为：设计稿元素尺寸/75，设计稿宽 750,最终页面会换算成 10rem      
            // unitPrecision: 5, // 允许REM单位增长的十进制数      
            propList: ["*"],      
            // selectorBlackList: [""], //（数组）要忽略的选择器并保留为px。      
            minPixelValue: 2 // （数字）设置要替换的最小像素值 解决 1px 问题    
        }  
    }
}

刷新页面得到就得到以下效果：

第六步：安装vant

cnpm i vant -S

//注：现在安装的vant-UI会根据rem缩小，如果你不需要，可将第五步改为：

      npm install postcss-px2rem-exclude --save
      
      module.exports = {  
        plugins: {    
            autoprefixer: {},    
            "postcss-px2rem-exclude": {      
                exclude: /node_modules|vant/i,   //设置忽略文件
                rootValue: 75, //结果为：设计稿元素尺寸/75，设计稿宽 750,最终页面会换算成 10rem      
                // unitPrecision: 5, // 允许REM单位增长的十进制数      
                propList: ["*"],      
                // selectorBlackList: [""], //（数组）要忽略的选择器并保留为px。      
                minPixelValue: 2 // （数字）设置要替换的最小像素值 解决 1px 问题    
            }  
        }
    }

第七步：配置vant

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

然后刷新页面：

到现在，vue CLI 3.0+vant的移动端自适应布局就做好啦，如果这篇文章对你有帮助，点个赞啊，哈哈哈