面适配 - 基本说明

全局 less 变量 - 配置

• 在 style 中导入其它样式文件： @import url('xxx');
  

有了设计规范之后，我们就可以根据规范中的内容抽取less全局变量啦,把颜色抽取一波,同时配合自动化导入让代码中可以使用

预处理器

自动化导入

style-resources-loader

实现步骤：

定义一个保存全局变量的文件

/src/style/var.less
装包

vue add  style-resources-loader

注意:

报上面错误就执行 npm i vue-cli-plugin-style-resources-loader --save

写配置文件vue.config.js

在App.vue中测试一下

const path = require('path')

module.exports = {
  // 插件配置
  pluginOptions: {
    // style-resources-loader配置
    'style-resources-loader': {
      // 预处理程序选择 less
      preProcessor: 'less',
      // 参数
      patterns: [
        // 项目根路径下 /src/styles/ 的所有less文件
        // 指定某一个的话可以具体设置为某一个less文件
        path.resolve(__dirname, './src/style/*.less')
      ]
    }
  }
}

页面的适配：

1. 通过 js 给页面上的根元素设置一个 font-size
2. 在页面上所有的宽高全部用 rem 来表示
   总结：这种操作太麻烦了

优化:

可以直接使用第三方包来解决问题：
amfe-flexible：可以自动给根元素设置一个 font-size
postcss-pxtorem：可以让我们写代码时宽高依旧是 px,这个工具会自动帮我们将 px 转为 rem

页面适配 - flexible

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

步骤：

• 1.0 安装 amfe-flexible
  

npm i -S amfe-flexible

• 2.0 在 main.js 中引入 amfe-flexible
  

import 'amfe-flexible'

页面适配 - postcss-pxtorem

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

文档地址：https://github.com/cuth/postcss-pxtorem

步骤：

1.0 下载 postcss-pxtorem

npm install postcss-pxtorem@5.1.1 --save-dev
2.0 使用插件

const path = require('path')

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

// 暴露出去
module.exports = {
  // 插件配置
  pluginOptions: {
    // style-resources-loader配置
    'style-resources-loader': {
      // 预处理程序选择 less
      preProcessor: 'less',
      // 参数
      patterns: [
        // 项目根路径下 /src/styles/ 的所有less文件
        // 指定某一个的话可以具体设置为某一个less文件
        path.resolve(__dirname, './src/style/*.less')
      ]
    }
  },
  // css属性如何处理
  css: {
    // 处理的选项
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          // 使用 pxtorem库进行转换
          pxtorem({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      }
    }
  }
}

注意点：

修改配置文件之后，需要重启项目
将来写代码时，在设计稿上量出多少就直接写为多少个 px ，我们的第三方包会自动将单位进行转换
摹客转换设置：

页面适配 - normalize.css

为了增强跨浏览器渲染的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。

文档地址：http://necolas.github.io/normalize.css/

• 1.0 下载 normalize.css
  

npm install normalize.css --save

• 2.0 导入第三方包
  

import 'normalize.css'

注意点：

这玩意儿只会将所有的默认样式进行统一，不会进行覆盖