欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

nuxt + vant 适配 rem

程序员文章站 2022-06-06 21:17:28
...

创建项目

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"
  ]
  ...
}
相关标签: vue 学习总结