项目起步 (一) 02-版本控制- 使用Vant - Rem适配——postcss-pxtorem插件和插件amfe-flexible & 基准值37.5rem

版本控制

1. 创建远程仓库

# （空）仓库地址
# https://gitee.com/zhoushugang/hm-toutiao-m-79

2. 提交

git add .
git commit -m '初始化'

3. 推送远程仓库

# 加别名origin
git remote add origin git@gitee.com:zhoushugang/hm-toutiao-m-79.git
# 推送记录操作
git push -u origin master

注明：不再采用分支来管理，按功能提交即可。

使用vant

• 官方地址：https://youzan.github.io/vant/#/zh-CN/intro
• 快速上手：https://youzan.github.io/vant/#/zh-CN/quickstart#fang-shi-san.-dao-ru-suo-you-zu-jian
• 安装：

npm i vant -S

• 导入-所有组件： src/main.js

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

Vue.use(Vant);

以上做法是完整导入，在项目开发阶段使用，配置方便节省时间，

将来上线或项目做优化的时候可以使用按需导入。

REM适配

网址：https://youzan.github.io/vant/#/zh-CN/quickstart#jin-jie-yong-fa

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

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
• lib-flexible 用于设置 rem 基准值

首先，需要安装：

# 后处理器 开发阶段使用
npm i postcss-pxtorem -D
# 修改rem基准值的js插件   需要在打包后需要使用
npm i amfe-flexible -S

然后，下面提供了一份基本的 postcss 配置（postcss.config.js），可以在此配置的基础上根据项目需求进行修改

module.exports = {
  plugins: {
    'autoprefixer': {},
+    'postcss-pxtorem': {
	   //转换成rem的默认基准值  100px的容器  100/37.5rem的容器
+      rootValue: 37.5,  	
+      propList: ['*']
+    }
  }
}

最后，入口文件main.js导入 amfe-flexible

import 'amfe-flexible'

注意

• rootValue 是转换px的基准值，参考设备iPhone6，设备宽度375px。

  规则：基准值=当前设备宽度的1/10

• flexible 在iPhone6设备设置的 html—>font-size 也为37.5px 。

  适配机型 iphone4|5 320px 32

  适配机型 iphone6|7|8 375px 37.5

• 但是 设计稿 尺寸750px 大小，所以在设计稿量取的尺寸使用时候需要 除以2 。