Vue-Nuxt引用Vant+px2rem移动端开发

安装Vant-ui

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

plugins文件夹新增vant.js文件
引入Button组件为例

import Vue from "vue";
import 'vant/lib/index.css';
import {
  Button
} from "vant";
Vue.use(Button);

nuxt.config.js文件进行配置

  plugins: [
    '@/plugins/vant'
  ],

安装px2rem

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

plugins文件夹新建lib-flexible.js文件

import 'lib-flexible'

nuxt.config.js文件进行配置

  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
        }
      }
    },
  }
上一篇:Nuxt使用vant导航栏组件tabbar


下一篇:vant框架弹出框Dialog的异步请求操作