1. 项目初始化

• 新建项目

vue create myProject

• 使用UI组件库 Vant（下面是全局引入，按需引入看文档）

npm i vant@next -S

// main.js
import Vant from "vant"; 
import "vant/lib/index.css";
// 这个不能忘
createApp(App).use(store).use(router).use(Vant).mount("#app");

• 使用 postcss-px-to-viewport 进行浏览器适配

npm install postcss-px-to-viewport --save-dev

• 配置 postcss-px-to-viewport，在项目根目录新建 postcss.config.js 文件（属性自行配置，配置完重启项目，这时候就可以看到浏览器中px被转换成vw）

module.exports = {
    plugins: {
        "postcss-px-to-viewport": {
           unitToConvert: "px",        // 要转化的单位
           viewportWidth: 750,         // UI设计稿的宽度
           unitPrecision: 5,           // 转换后的精度，即小数点位数
           propList: ["*"],            // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
           viewportUnit: "vw",         // 指定需要转换成的视窗单位，默认vw
           fontViewportUnit: "vw",     // 指定字体需要转换成的视窗单位，默认vw
           selectorBlackList: ["van"], // 指定不转换为视窗单位的类名，
           minPixelValue: 1,           // 默认值1，小于或等于1px则不进行转换
           mediaQuery: true,           // 是否在媒体查询的css代码中也进行转换，默认false
           replace: true,              // 是否转换后直接更换属性值
           exclude: [/node_modules/],  // 设置忽略文件，用正则做目录名匹配
           landscape: false,           // 是否处理横屏情况
        },
    },
};

• 未完待续...