Vue-cli3.x H5项目的一些配置

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

详见：http://momentjs.cn/