vue3初始化配置

本博客基于vue框架vue3.3.4，这些配置按照自己的需求来即可

安装less

vue3只需要安装less，在这里很多博主都多余的安装了less-loader。

npm i less -D

配置px到rem转换

一般我们做前端的会有一个设计稿，按照这个设计稿去设计前端的程序，而设计稿通过ps打开以后他显示的px是基于设计稿来说的，比如设计一个移动端，设计稿上是基于750px的尺寸，而你要做iphone7/8/9，iphone7/8/9的尺寸是375px的尺寸，我们想让ps上测量的px的大小就是我们要设计的iphone7/8/9的大小，如果不配置px到rem转换，你每次测量完宽高还要手动计算，超级麻烦

npm i postcss postcss-pxtorem -D

这里也很多博主写的很不好，我都是vue3了，我配置文件就是要放在vite中配置优雅啊，因此打开vite.config.ts

export default defineConfig({
    plugins: [
        vue()
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url)),
        },
    },
    css: {
        postcss: {
            plugins: [
                require('postcss-pxtorem')({
                    rootValue: 10, // 设计稿的分辨率因子
                    propList: ['*'],
                    exclude: /node_modules/i,
                }),
            ],
        },
    },
});

这个rootValue: 10就是代表把设计稿的分辨率为10，以上面的为例750px/10=75px,
就是说1rem为75px,这时你要把设计稿上的尺寸和你的要设计的移动端的尺寸匹配上，也就是说375px/10 = 37.5px，这样你在设计稿上测的多少px，在你的程序里直接写读多少px就好了，会按照同比例进行转换为rem的：

html{
/*代表1rem等于37.5px*/
font-size:37.5
}

这时你在程序里写的px就会经过一系列的换算，比如你写10px，实际大小就是10px/10*37.5px = 37.5px。
配置这个主要用于就是设计稿和要设计的移动端尺寸不一样时，这样就不用手动换算了。