1、如何进行sass配置及操作
创建好vue-cli3.x创建好后；新建一个Vue项目；在该项目中使用sass需要两步；
首先；安装sass操作的依赖：安装node-sass 和 sass-loader
npm install --save-dev node-sass；
npm install --save-dev sass-loader；
第二步：.在需要使用sass地方的组件中直接使用:
<style lang = "scss" scoped>
$myRed:#ff0;
.top{ color:$myRed; }
</style>
对于页面中需要的sass变量比较多；可以单独建一个sass文件；即在src下创建一个common文件，我们在里面存放scss文件
image.png
base.scss中设置$myColor,具体做法如图：
image.png
然后在刚刚我们的组件中导入：
<style lang = "scss" scoped>
@import "../../common/scss/base"; （注意引入的层级关系）
.top{
color:$myColor;
}
</style>
如果你觉得每个组件都引入sass文件；很麻烦；也可以把它在全局引入；使其变成全局变量；供全局使用。操作步骤:
在main.js中引入sass文件；即：import "./commonon/base.scss" ;
对于多个sass文件；可以把多个sass文件引入一个根sass文件中；如：main.scss；然后在需要的组件中引入main.scss即可；
2、使用postcss-pxtorem进行适配
温馨提示：对行内样式无效喔~
下载依赖
npm install postcss-pxtorem -D
新建一个rem.js的文件，在main.js中引用。
// 蓝湖上设计稿自定义为375px 测量值直接写入即可
(function() {
const baseSize = 16; // 32
function setRem() {
const scale = document.documentElement.clientWidth / 375; // 750
document.documentElement.style.fontSize =
baseSize * Math.min(scale, 2) + "px";
}
window.onresize = function() {
setRem();
};
})();
postcss.config.js
module.exports = {
plugins: {
// 兼容浏览器，添加前缀
autoprefixer: {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8",
"last 10 versions", // 所有主流浏览器最近10版本用
],
grid: true,
},
"postcss-pxtorem": {
rootValue: 16, //结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
unitPrecision: 5, //保留rem小数点多少位
//selectorBlackList: ['.radius'], //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
replace: true, //这个真不知到干嘛用的。有知道的告诉我一下
mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
minPixelValue: 12, //px小于12的不会被转换
},
},
};
// 蓝湖上设计稿自定义为375px 测量值直接写入即可 若设计稿为750px 则rootValue: 32
实例演示：
假如给出设计图是 375*812，可以在代码中直接写入：
div{
width: 375px;
height: 812px;
}
此时在页面中显示：
image.png
如果要让部分属性不转换成 rem，可以将 px 写成 Px：
div{
width: 375Px;
height: 812px;
}
这时在页面中就会保留 375px 了。
image.png
3、Moment.js （JavaScript 日期处理类库）安装及使用
npm install moment --save # npm
yarn add moment # Yarn
Install-Package Moment.js # NuGet
spm install moment --save # spm
meteor add momentjs:moment # meteor
日期格式化
moment().format('MMMM Do YYYY, h:mm:ss a'); // 二月 2日 2021, 11:08:00 上午
moment().format('dddd'); // 星期二
moment().format("MMM Do YY"); // 2月 2日 21
moment().format('YYYY [escaped] YYYY'); // 2021 escaped 2021
moment().format(); // 2021-02-02T11:08:00+08:00
相对时间
moment("20111031", "YYYYMMDD").fromNow(); // 9 年前
moment("20120620", "YYYYMMDD").fromNow(); // 9 年前
moment().startOf('day').fromNow(); // 11 小时前
moment().endOf('day').fromNow(); // 13 小时内
moment().startOf('hour').fromNow(); // 8 分钟前
日历时间
moment().subtract(10, 'days').calendar(); // 2021/01/23
moment().subtract(6, 'days').calendar(); // 上星期三11:08
moment().subtract(3, 'days').calendar(); // 上星期六11:08
moment().subtract(1, 'days').calendar(); // 昨天11:08
moment().calendar(); // 今天11:08
moment().add(1, 'days').calendar(); // 明天11:08
moment().add(3, 'days').calendar(); // 下星期五11:08
moment().add(10, 'days').calendar(); // 2021/02/12
多语言支持
moment.locale(); // zh-cn
moment().format('LT'); // 11:08
moment().format('LTS'); // 11:08:00
moment().format('L'); // 2021/02/02
moment().format('l'); // 2021/2/2
moment().format('LL'); // 2021年2月2日
moment().format('ll'); // 2021年2月2日
moment().format('LLL'); // 2021年2月2日上午11点08分
moment().format('lll'); // 2021年2月2日 11:08
moment().format('LLLL'); // 2021年2月2日星期二上午11点08分
moment().format('llll'); // 2021年2月2日星期二 11:08
