【vue】vue使用rem布局

Rem布局：
1.安装
npm i amfe-flexible -S
npm i postcss postcss-pxtorem -D
2.main.js引入
import ‘amfe-flexible’
3. 与src同级目录创建postcss.config.js

/* 需要依赖：lib-flexible、postcss-pxtorem */
module.exports = {
    plugins: {
        autoprefixer: {},
        "postcss-pxtorem": {
            rootValue: 192, // 192表示1920设计稿，
            propList: ["*"],
        },

4.Vscod安装插件（将px转成rem）cssrem

5.package.json

{
  "name": "videooperate",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "amfe-flexible": "^2.2.1",
    "axios": "^1.3.4",
    "vue": "^3.2.47",
    "vue-axios": "^3.5.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "postcss": "^8.4.21",
    "postcss-pxtorem": "^6.0.0",
    "autoprefixer": "^10.4.14",
    "vite": "^4.2.0"
  },"postcss": {
    "plugins": {
      "autoprefixer": {}
    }}
}