nuxt + vant 適配 rem

創建項目

npx create-nuxt-app <項目名>

詳情查看 安裝-NuxtJS

安裝vant

npm i vant -S

引入vant

這裏採用的是： 導入所有組件

在根目錄的 plugins 目錄下創建 vant.js ，內容如下：

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

在 nuxt.config.js 中引入：

module.exports = {
  ...
  plugins: [
    {
      src: '~/plugins/vant.js'
    }
  }
  ...
}

Rem 適配

npm install postcss-pxtorem autoprefixer --save-dev

npm i -S amfe-flexible

在根目錄的 plugins 目錄下創建 lib-flexible.js ，內容如下：

import 'amfe-flexible'

然後在 nuxt.config.js 添加如下配置

module.exports = {
  ...
  head: {
    ...
    meta: [
      {
        charset: 'utf-8'
      },
      {
        name: 'viewport',
        content:
          'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'
      }
      ...
    }
    ...
  }
  ...
  plugins: [
    {
      src: '~/plugins/vant.js'
    },
    {
      src: '~/plugins/lib-flexible.js',
      mode: 'client'
    }
  }
  ...
  build: {
    ...
    postcss: {
      plugins: {
        'postcss-pxtorem': {
          rootValue: 37.5,
          propList: ['*']
        }
      },
      preset: {
        autoprefixer: true
      }
    }
    ...
  }
}

可以在 package.json 中配置 browserslist:

{
  ...
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
  ...
}