Nuxt hace referencia a vant + px2rem para adaptarse al desarrollo de terminales móviles

Instalar vant

npm i vant -S //安装vant
npm i babel-plugin-import -D //按需引入

En el componente de introducción de pluginsnuevo vant.jsarchivo de carpeta como ejemplo
Button

import Vue from "vue";
import {
    
    
  Button
} from "vant";
Vue.use(Button);

nuxt.config.jsConfigurar en archivo

  plugins: [
    '@/plugins/vant'
  ],
   build: {
    
    
    transpile: [/vant.*?less/],
    babel: {
    
    
      plugins: [
        [
          'import',
          {
    
    
            libraryName: 'vant',
            style: (name) => {
    
    
              return `${
      
      name}/style/less.js`
            }
          },
          'vant'
        ]
      ]
    }
  }

Instalar px2rem

npm i lib-flexible -s
npm i postcss-px2rem-exclude -s

pluginsCrea un nuevo lib-flexible.jsarchivo en la carpeta.

import 'lib-flexible'

nuxt.config.jsConfigurar en archivo

  plugins: [{
    
    
      src: '@/plugins/lib-flexible',
      ssr: false //不设置会报错
    },
    '@/plugins/vant'
  ],
  build: {
    
    
    postcss: {
    
    
      plugins: {
    
    
        'postcss-px2rem-exclude': {
    
    
          remUnit: 75, // 设计图为750 * height
          remPrecision: 2, // rem的小数点后位数
          exclude: /node_modules|folder_name/i //取消vant组件css转成rem
        }
      }
    },
  }

Supongo que te gusta

Origin blog.csdn.net/AK852369/article/details/112717595
Recomendado
Clasificación