日常问题汇总1.vue自动编译出错（Strings must use singlequote，quotes---双引号。

1.vue自动编译出错（Strings must use singlequote，quotes---双引号。Extra semicolon，emi ----末尾分号。Unexpected trailing comma，comma-dangle---逗号。）

**##### 解决方法:配置文件eslintrc.js中设置

rules:{

'comma-dangle': 'off', // 是否允许对象中出现结尾逗号

'quotes': 'off',//引号类型

'semi': 'off'//语句接触强制分号结尾

}

ESLint的规则有三种级别：

"off"或者0，不启用这个规则

"warn"或者1，出现问题会有警告

"error"或者2，出现问题会报错

2.vue安装了less-loader模块之后报错

原因： less-loader安装的版本过高

解决方案：

1.npm uninstall less-loader

2.npm install less-loader@6.0.0

3.阿里图标库的引用

下载iconfont代码放入项目assets文件下。代码引用见下图：

4.VUE踩坑： error 'res' is assigned a value but never used no-unused-vars

错误原因：eslint的验证语法

解决办法：在错误语句后添加注释 // eslint-disable-line no-unused-vars

5.CSS水平垂直居中

利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。

.parent { position: relative;} .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：

`.parent { position: relative; }

.child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }`

利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况

`.parent { position: relative; }

.child { position: absolute; top: 50%; left: 50%; margin-top: -50px; /* 自身 height 的一半 / margin-left: -50px; / 自身 width 的一半 */ }`

使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：

.parent { display: flex; justify-content:center; align-items:center; }

6.Mac Big Sur升级后brew安装报错问题解决

Error: Failure while executing; `tar --extract --no-same-owner --file /Users/xxxx/Library/Caches/Homebrew/downloads/f839b337f0ac1b367e2bdd72123940432a73834db77556858cefb671c2471aba--brotli-1.0.9.big_sur.bottle.tar.gz --directory /private/tmp/d20210623-7058-5w61ky` exited with 1. Here's the output:

tar: Error opening archive: Failed to open '/Users/xxxx/Library/Caches/Homebrew/downloads/f839b337f0ac1b367e2bdd72123940432a73834db77556858cefb671c2471aba--brotli-1.0.9.big_sur.bottle.tar.gz'

替换homebrew-bottles：

首先要先区分你的mac用哪种终端工具，

如果是 bash，则执行：

echo 'export HOMEBREW_BOTTLE_DOMAIN=mirrors.ustc.edu.cn/homebrew-bo…' >> ~/.bash_profile

source ~/.bash_profile

若是 zsh，则执行：

echo 'export HOMEBREW_BOTTLE_DOMAIN=mirrors.ustc.edu.cn/homebrew-bo…' >> ~/.zshrc

source ~/.zshrc

然后再去brew安装，就成功了。

其他镜像替换：

替换 brew.git： git -C "$(brew --repo)" remote set-url origin mirrors.ustc.edu.cn/brew.git

替换 homebrew-core.git： git -C "$(brew --repo homebrew/core)" remote set-url origin mirrors.ustc.edu.cn/homebrew-co…

替换 homebrew-cask.git： git -C "$(brew --repo homebrew/cask)" remote set-url origin mirrors.ustc.edu.cn/homebrew-ca…

7.正则校验

1. 只能输入中文

if (self.userName != "") {
    const isNumber = /^([\u4e00-\u9fa5]{1,6})$/gi.test(self.userName);
    if (!isNumber) {
      laryMsg("请输入中文");
      return false;
    }
  }

2. 删除 input内多余空格

let str =' 1 2 3 4 5 '; str.replace(/\s+/g, "");
console.log(str);

————————————————

原文链接：blog.csdn.net/ljl6158999/…

8.常见数组组合处理

const list1 = [{name: '营商环境', value: 10},{name: '住保房管', value: 9},{name: '疫情防控', value: 8}];
const list2 = [{name: '劳动和社会保障', value: 10},{name: '城市管理', value: 7},{name: '公共服务', value: 6},{name: '环境保护', value: 1}];
const list3 = [{name: '大气污染', value: 3},{name: '健康码', value: 2}];

const maxLength = Math.max(list1.length, list2.length, list3.length);
const res = [];

for(let i = 0; i < maxLength; i++) {
    res.push({
        name: [list1[i]?.name, list2[i]?.name, list3[i]?.name].filter(Boolean).join('-'),
        value: (list1[i]?.value || 0) + (list2[i]?.value || 0) + (list3[i]?.value || 0)
    });
}
console.log(res);
// [
//   { name: '营商环境-劳动和社会保障-大气污染', value: 23 },
//   { name: '住保房管-城市管理-健康码', value: 18 },
//   { name: '疫情防控-公共服务', value: 14 },
//   { name: '环境保护', value: 1 }
// ]

日常问题汇总