黑马头条vue2.0项目实战（一）——项目初始化（移动rem适配）_vuerem适配

1. 图标素材（iconfont简介）

制作字体图标的工具有很多，推荐使用：iconfont-阿里巴巴矢量图标库。

• 注册账户

• 创建项目

        可以根据项目自定义 class 前缀

• 上传图标到项目

• 生成链接，复制 css 代码，在项目中使用。

2. Vant 组件库

        Vant 是有赞商城前端开发团队开发的一个基于 Vue.js 的移动端组件库，它提供了非常丰富的移动端功能组件，简单易用。

• 官方文档

• GitHub 仓库

下面是在 Vant 官网中列出的一些优点：

• 60+ 高质量组件

• 90% 单元测试覆盖率

• 完善的中英文文档和示例

• 支持按需引入

• 支持主题定制

• 支持国际化

• 支持 TS

• 支持 SSR

        项目中主要使用 Vant 作为核心组件库，下面根据官方文档将 Vant 导入项目中。

将 Vant 引入项目一共有四种方式：

• 方式一：自动按需引入组件

  • 和方式二一样，都是按需引入，但是加载更方便一些（需要额外配置插件）

  • 优点：打包体积小

  • 缺点：每个组件在使用之前都需要手动加载注册

• 方式二：手动按需引入组件

  • 在不使用插件的情况下，可以手动引入需要的组件

  • 优点：打包体积小

  • 缺点：每个组件在使用之前都需要手动加载注册

• 方式三：导入所有组件

  • Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法

  • 优点：导入一次，使用所有

  • 缺点：打包体积大

• 方式四：通过 CDN 引入

  • 使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量vant访问到所有组件。

  • 优点：适合一些演示、示例项目，一个 html 文件就可以跑起来

  • 缺点：不适合在模块化系统中使用

3. 移动端 REM 适配

        

Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

• lib-flexible 用于设置 rem 基准值

下面我们分别将这两个工具配置到项目中完成 REM 适配。

3.1 使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）

• 安装

yarn add amfe-flexible
或者npm i amfe-flexible

• 然后在 main.js 中加载执行该模块

3.2 使用 postcss-pxtorem 将 px 转为 rem

• 安装

# yarn add -D postcss-pxtorem
# -D 是 --save-dev 的简写
npm install postcss-pxtorem -D

• 然后在项目根目录中创建 postcssrc.config.js 文件

参考vant官方文档，如下。

• 配置完毕，重新启动服务，刷新浏览器页面，审查元素的样式查看是否已将 px 转换为 rem。

需要注意的是：

• 该插件不能转换行内样式中的 px，例如 <div style="width: 200px;"></div>

3.3 关于 postcssrc.config.js 配置文件

PostCSS.config.js 是 PostCSS 的配置文件。

（1）PostCSS 介绍

PostCSS 是一个处理 CSS 的处理工具，本身功能比较单一，它主要负责解析 CSS 代码，再交由插件来进行处理，它的插件体系非常强大，所能进行的操作是多种多样的，例如：

• Autoprefixer 插件可以实现自动添加浏览器相关的声明前缀

• PostCSS Preset Env 插件可以让你使用更新的 CSS 语法特性并实现向下兼容

• postcss-pxtorem 可以实现将 px 转换为 rem

• ...

目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件。

PostCSS 一般不单独使用，而是与已有的构建工具进行集成。

Vue CLI 默认集成了 PostCSS，并且默认开启了 autoprefixer 插件。

Vue CLI 内部使用了 PostCSS。

你可以通过 psotCSS.config.js 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。

我们默认开启了 autoprefixer。如果要配置目标浏览器，可使用 package.json 的 browserslist 字段。

（2）Autoprefixer 插件的配置

autoprefixer 是一个自动添加浏览器前缀的 PostCss 插件，browsers 用来配置兼容的浏览器版本信息，但是写在这里的话会引起编译器警告。

（3）postcss-pxtorem 插件的配置

• rootValue：表示根元素字体大小，它会根据根元素大小进行单位转换

• propList 用来设定可以从 px 转为 rem 的属性

  • 例如 * 就是所有属性都要转换，width 就是仅转换 width 属性

rootValue 应该如何设置呢？

        如果你使用的是基于 lib-flexable 的 REM 适配方案，则应该设置为你的设计稿的十分之一。
例如设计稿是 750 宽，则应该设置为 75。

大多数设计稿的原型都是以 iphone6 为原型，iphone6 设备的宽是 750，我们的设计稿也是这样。

但是 Vant 建议设置为 37.5，为什么呢？

        因为 Vant 是基于 375 写的，所以如果你设置为 75 的话，Vant 的样式就小了一半。所以如果设置为 37.5 的话，Vant 的样式是没有问题的，但是我们在测量设计稿的时候都必须除 2 才能使用，否则就会变得很大。

通过查阅文档我们可以看到 rootValue 支持两种参数类型：

• 数字：固定值

• 函数：动态计算返回

  • postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数

  • 它会把被处理的 CSS 文件相关的信息通过参数传递给该函数

所以修改配置如下：

        假设设计稿宽是750px的情况下，在写 css 样式的时候就可以量多少写多少，而不用再去除以2。