Vuecli脚手架页面适配配置rem自动转换插件和全局less插件

页面适配

amfe-flexible:可以自动给页面中的 html 标签设置字体大小，以此设置 rem 的基本值

使用步骤:

1.安装lib-flexible

npm i -S amfe-flexible

2.在main.js种引入

import 'amfe-flexible'

postcss-pxtorem:设计稿中的测量出来的长度都是 px, 无法自动适应设备，如果自己手写 px 转换 rem 太麻烦了，可以使用postcss-pxtorem来自动设置

使用步骤:

1.安装postcss-pxtorem

npm install postcss-pxtorem --save-dev

 

2.vue.config.js中配置:

// 项目根目录中创建了`vue.config.js`
// 导包
const autoprefixer = require('autoprefixer')
// 导包
const pxtorem = require('postcss-pxtorem')

// 暴露出去
module.exports = {
  // css属性如何处理
  css: {
    // 处理的选项
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          // 使用 pxtorem库进行转换
          pxtorem({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      }
    }
  }
}

 normalize.css:很多现代化浏览器会为元素标签添加一些独有的默认样式，这会带来一定的显示差异，我们可以自己写css去覆盖，但是有个写好的样式库可以直接使用，他就是normalize.css

使用步骤:

1.安装normalize.css

npm install normalize.css

2.在main.js或者App.vue中引入

import 'normalize.css'

全局less处理

style-resources-loader:能抽取全局less变量或代码块,自动化导入让其在任何页面中都能使用

使用步骤:

1.安装style-resources-loader

vue add  style-resources-loader
// 如果上面一行执行报错了就执行下面的
npm i style-resources-loader

2.vue.config.js中配置:

const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')
const path = require('path')

module.exports = {
  // 配置pxtorem插件对代码中的px进行转换，以37.5为1rem的值
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtorem({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      }
    }
  },
  // 插件配置
  pluginOptions: {
    // style-resources-loader配置
    'style-resources-loader': {
      // 预处理程序选择 less
      preProcessor: 'less',
      // 参数
      patterns: [
        // 项目根路径下 /src/styles/ 的所有less文件
        // 指定某一个的话可以具体设置为某一个less文件
        path.resolve(__dirname, './src/style/*.less')
      ]
    }
  }
}

这样基本的页面适配和全局less配置就弄好啦~