记录我的大大小小的问题，待续ing...

遇到的问题：


造成的原因：
文件没有编辑权限，因为该项目我是用root用户创建的，结果换了个普通用户就没有编辑权限了。
解决办法：
sudo chown -R $USER 项目路径
（R 必须大写）

打开项目根上下的.eslintrc.js，将rules节点中添加以下配置项。
rules: {
‘vue/script-indent’: [‘error’, 2, {‘baseIndent’: 1}]
}

其中第1个2是指统一缩进2个空格，第2个1是指1倍缩进。
另外需要添加以下节点，与rules同级：

overrides: [
  {
    'files': ['*.vue'],
    'rules': {
      'indent': 'off'
    }
  }
]

原文：https://blog.csdn.net/lpw_cn/article/details/84899742

> Error:
> /Users/renlingling/eslint-config-sgfe/node_modules/eslint-config-airbnb-base/rules/es6.js:
>         Configuration for rule "no-restricted-imports" is invalid:
>         Value "[object Object]" is the wrong type.

解决方法：
查看package.json中eslint以及eslint-config-*的版本是否更新到了最新。可能时版本冲突了！

类似上图，鼠标?️停留在货架型号的小问号后边，弹出框应该显示在货架型号下边，但是现在却在租户名称下边，这个问题追根溯源我觉得是定位问题
看截图：


距离Tooptip的最近的相对定位在整个table，所以这个黑色弹框会在table的开始处弹出！
我刚是是在table的列头处设置了一下position:relative,但是有一个问题，就是弹框不完全显示！所以这个方法是不可行的！
之后我又发现了一个更好的办法，只要设置一个属性就OK了

 props: {
            content: '领先/落后品类=单店平均单量-该品类城市店均单量',
            transfer: true
            }

transfer:true 时，说明弹窗内容在这个列头的body内了。。

报错：error Use the latest vue-eslint-parser.
因为自定义的eslint项目中包含.js、.ts以及.vue的规则
当然规范.ts的规则是新添加的，之前一直没有这个问题，应该是后引入的.ts规则导致的
解决办法：
规范.ts文件的文件名：eslintrc.typescript.js
导致报错文件内容：

module.exports = {
    parser: 'typescript-eslint-parser',
    plugins: [
        'typescript'
    ],
    rules: {
        // 类和接口的命名必须遵守帕斯卡命名法，比如 PersianCat
        'typescript/class-name-casing': 'error'
    }
}

解决后：

module.exports = {
     parserOptions: {
        parser: 'typescript-eslint-parser', 
     },
    plugins: [
        'typescript'
    ],
    rules: {
        // 类和接口的命名必须遵守帕斯卡命名法，比如 PersianCat
        'typescript/class-name-casing': 'error'
    }
}

可见，把parser放入了parserOption中就可以了 ，因为typescript-eslint-parser和eslint-plugin-vue存在冲突！

参考： https://segmentfault.com/a/1190000021043947

1】文案不折行：

word-space:nowarp

2】同行div高度一致
父级div: 设置display: table
子级div: 设置 display: table-cell
*设置子级们之间的距离，不能使用margin和padding,会失效
可以使用

border-collapse:separate;
border-space: 15px 0; // 左右上下

3】在jsx中使用img时，引入src记得在外包一层require

8、img标签加载资源失败，但在浏览器资源是可以直接打开的

这种说明资源的链接是没有问题的，大概率是页面的链接的http协议与图片的http的协议不一致导致的，页面是https，而图片资源是http的，导致浏览直接block了资源的加载，从而资源加载失败～
解决方式：
在index.html中加

<meta name="referrer" content="no-referrer"/>

或是检测资源的协议是否是https，若不是，将http替换成https.