Nuxt引用vant+px2rem适配移动端开发

Nuxt 专栏收录该内容
15 篇文章 0 订阅

安装vant

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

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

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

nuxt.config.js文件进行配置

  plugins: [
    '@/plugins/vant'
  ],
   build: {
    transpile: [/vant.*?less/],
    babel: {
      plugins: [
        [
          'import',
          {
            libraryName: 'vant',
            style: (name) => {
              return `${name}/style/less.js`
            }
          },
          '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
        }
      }
    },
  }
  • 0
    点赞
  • 4
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:马嘣嘣 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值