#博学谷IT学习技术支持#
目录
1.postcss-pxtorem
2.lib-flexible
3.Day.js
1.postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
1.1使用 postcss-pxtorem 将 px 转为 rem
安装
# yarn add -D postcss-pxtorem
# -D 是 --save-dev 的简写
npm install postcss-pxtorem -D
然后在项目根目录中创建 .postcssrc.js 文件
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 8']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
注意点：关于 .postcssrc.js 配置文件
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 8']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
通过查阅文档我们可以看到 rootValue 支持两种参数类型：
数字：固定值
函数：动态计算返回
postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
它会把被处理的 CSS 文件相关的信息通过参数传递给该函数
所以我们修改配置如下：
/**
* PostCSS 配置文件
*/
module.exports = {
// 配置要使用的 PostCSS 插件
plugins: {
// 配置使用 autoprefixer 插件
// 作用：生成浏览器 CSS 样式规则前缀
// VueCLI 内部已经配置了 autoprefixer 插件
// 所以又配置了一次，所以产生冲突了
// 'autoprefixer': { // autoprefixer 插件的配置
// // 配置要兼容到的环境信息
// browsers: ['Android >= 4.0', 'iOS >= 8']
// },
// 配置使用 postcss-pxtorem 插件
// 作用：把 px 转为 rem
'postcss-pxtorem': {
rootValue ({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75
},
propList: ['*']
}
}
}
2.lib-flexible 用于设置 rem 基准值
使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）
安装
# yarn add amfe-flexible
npm i amfe-flexible
然后在 main.js 中加载执行该模块
import 'amfe-flexible'
3.Day.js
1、安装
npmi dayjs
2、创建 utils/dayjs.js
import Vue from 'vue'
import dayjs from 'dayjs'
// 加载中文语言包
import 'dayjs/locale/zh-cn'
import relativeTime from 'dayjs/plugin/relativeTime'
// 配置使用处理相对时间的插件
dayjs.extend(relativeTime)
// 配置使用中文语言包
dayjs.locale('zh-cn')
// 全局过滤器：处理相对时间
Vue.filter('relativeTime', value => {
return dayjs().to(dayjs(value))
})
3、在 main.js 中加载初始化
import './utils/dayjs'
4、使用
使用过滤器：
<p>{{ 日期数据 | relativeTime }}</p>
