欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

20200723——重构前端监控遇到的问题（一）

程序员文章站 2022-03-03 21:56:01
报错信息：Generation failed. Error: 'git clone' failed with status 128报错原因：没有权限// 全局安装climeowtea@MeowdeMacBook-Pro % sudo npm install mainto-cli -g --registry https://npm.c...// 初始化项目，在桌面即可完成meowtea@MeowdeMacBook-Pro Desktop % mainto init data......

目录

报错信息：Generation failed. Error: 'git clone' failed with status 128

报错信息： ! [remote rejected] master -> master (pre-receive hook declined) 

解决 eslint报错：标签属性最多只能同时拥有三个

解决 vue-router 携带 # 的问题

解决安装第三方模块失败的问题，如 echarts /ant-design /moment 等等

pv / uv / ip 的关系

报错信息：1:21  error  Trailing spaces not allowed                    no-trailing-spaces报错信息：28:1   error  Expected indentation of 8 spaces but found 6   indent....

合并请求在 merge 中被指回去的含义：

启示：项目提交之前，最好执行一下 lint，检测项目中 是否有多余代码 / 是否符合 eslint语法规范等等 

在 package.json 的 scripts中存储了常用的命令：

eslint 一些常见命令的含义

用 npm安装第三方依赖失败解决方案：cnpm install moment --save

缩进快捷键：shift + tab

未解决的问题：

Mode:history 去除# 属性失效的问题

element-ui 在 vue单文本组件中样式设置失效（好像可以用/deep/解决，未实践）

pageheader 中的数据绑定问题

整理 element-ui 表格的学习记录

  • 报错信息：Generation failed. Error: 'git clone' failed with status 128

  • 报错原因：没有权限

// 全局安装cli
meowtea@MeowdeMacBook-Pro % sudo  npm install mainto-cli -g --registry https://npm.c...

// 初始化项目，在桌面即可完成
meowtea@MeowdeMacBook-Pro Desktop % mainto init data-monitoring      
? 项目的名称 data-monitoring
? 项目的版本号 1.0.0
? 项目的简介 A project named data-monitoring
? 选择框架类型 admin

 Start generating... 

// 失败的错误提示
✖ Downloading...
Generation failed. Error: 'git clone' failed with status 128

// 成功的提示
✔ Downloading...
 Generation completed!
 To get started
 cd data-monitoring
 yarn && yarn serve

// 根据上面的命令行提示，输入 yarn 或 yarn serve

 

  • 报错信息： ! [remote rejected] master -> master (pre-receive hook declined) 

  • 报错原因：远程仓库没有 master分支 / 主人未开通权限 

meowtea@MeowdeMacBook-Pro data-monitoring %    git push --set-upstream origin master
Enumerating objects: 140, done.
...
Writing objects: 100% (140/140), 315.29 KiB | 7.88 MiB/s, done.
Total 140 (delta 5), reused 0 (delta 0)
remote: Resolving deltas: 100% (5/5), done.
remote: GitLab: 
remote: A default branch (e.g. master) does not yet exist for zx/data-monitorin
...
// 错误主要信息：
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'git@code.hzmantu.com:zx/data-monitoring.git'

 

  • 解决 eslint报错：标签属性最多只能同时拥有三个

  • 可以直接粘贴修改过的 eslint文件，或者在里面寻找设置标签属性的选项进行修改（错误的做法）
  • 正确做法：安装 eslint 插件，自动规范代码格式，vscode 配置文件规则如下：
// {
//     "workbench.colorTheme": "Monokai",
//     "auto-rename-tag.activationOnLanguage": [

//         "*"
//     ]
// }
{
    //主题设置
    "workbench.colorTheme": "Monokai",
    // 默认编辑器字号
    "editor.fontSize": 11.5,
    //是否自动换行 
    "editor.wordWrap": "on",
    // tab几个缩进
    "editor.tabSize": 2,
    // 文件自动保存
    // "files.autoSave": "afterDelay",
    "files.autoSave": "off",
    // 自动格式化粘贴的代码
    "editor.formatOnPaste": true,
    // 在资源管理器删除内容时候是否进行用户提醒
    "explorer.confirmDelete": false,
    // 控制在资源管理器内拖放移动文件或文件夹时是否进行确认
    "explorer.confirmDragAndDrop": false,
    // 在资源管理器拖拽文件是否进行用户提醒
    "workbench.statusBar.visible": true,
    // 工作区缩放级别
    "window.zoomLevel": 0,
    // 重命名或移动文件时，启用或禁用自动更新导入路径
    "javascript.updateImportsOnFileMove.enabled": "always",
    // 启用/禁用导航路径
    "breadcrumbs.enabled": true,
    // 不检查缩进，保存后统一按设置项来设置
    "editor.detectIndentation": false,
    // 编辑器初始界面
    "workbench.startupEditor": "newUntitledFile",
    // 工作台状态栏是否可见
    "workbench.statusBar.feedback.visible":false,
    // 添加多个光标时候需要的快捷键
    "editor.multiCursorModifier": "ctrlCmd",
    // 自定义代码片段显示的位置
    "editor.snippetSuggestions": "top",
    "window.menuBarVisibility": "toggle",
    // 启用后，按下 TAB 键，将展开 Emmet 缩写。
    "emmet.triggerExpansionOnTab": true,
    // 控制编辑器在空白字符上显示符号的方式
    "editor.renderWhitespace": "all",
    // 控制编辑器是否应呈现空白字符
    "editor.renderControlCharacters": false,
    // 在文件和文件夹上显示错误和警告
    "problems.decorations.enabled": false,
    // html文件格式化程序
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features",
        // 禁止eslint对html进行校验
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": false
        }
    },
    // "[javascript]": {
    //     "editor.defaultFormatter": "vscode.typescript-language-features"
    // },

    // vscode-fileheader  -----settings begin-----

    // 文件作者
    "fileheader.Author": "JiaoShouf2e",
    // 文件最后修改者
    "fileheader.LastModifiedBy": "JiaoShouf2e",
    
    // vscode-fileheader  -----settings end-----

    
    //stylelint   -----settings begin-----

    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    "stylelint.enable": false,

    //stylelint   -----settings end-----

    // eslint   -----settings begin-----

    // 是否为JavaScript文件开启eslint检测
    "eslint.enable": true,
    // 保存之后进行lint
    "eslint.run": "onSave",
    // 是否启用eslint的调试模式
    "eslint.debug": true,
    // 保存文件时进行eslint修复(MacOS：快捷键是 command + s ),并不能修复所有问题，多数还是需要手动修复
    "editor.codeActionsOnSave":{
      "source.fixAll.eslint": true
    },
    "auto-rename-tag.activationOnLanguage": [
         "*"
    ]
    // eslint   -----settings end-----
}

 

  • 解决 vue-router 携带 # 的问题

  • 百度到的解决方案：mode: 'history'，实际操作并未生效
          {
            path: '/',
            redirect: '/projects',
            name: 'projects',
            meta: { hidden: true, mode: 'history' }
          }

 

  • 解决安装第三方模块失败的问题，如 echarts /ant-design /moment 等等

  • cnpm install xxx --save 
  • 很多情况下，因为下载过慢都会导致失败，可以尝试 cnpm

 

  • pv / uv / ip 的关系

  • PV(访问量)：Page View, 页面浏览量 / 点击量，页面刷新一次，流量统计工具显示的PV就 +1

  • UV(独立访客)：Unique Visitor,访问网站的一台电脑客户端为一个访客，00:00-24:00 内相同客户端只被计算一次

  • 关系：一个UV可以用很多PV，一个PV也、只能对应一个IP

  • 比如，今天访问了一次 x网站，x网站 UV就加了1，这次访问浏览了两个页面，x网站 PV就加2，访问同一页面，但刷新了一次，PV也加2

 

  • 报错信息：1:21  error  Trailing spaces not allowed                    no-trailing-spaces
    报错信息：28:1   error  Expected indentation of 8 spaces but found 6   indent....

  • ide提示：You may use special comments to disable some warnings.
    Use // eslint-disable-next-line to ignore the next line.
    Use /* eslint-disable */ to ignore all warnings in a file.      // 在组件的 script 中最顶部调用这句话就行了

 

  • 合并请求在 merge 中被指回去的含义：

  • 20200723——重构前端监控遇到的问题（一）

  • 启示：项目提交之前，最好执行一下 lint，检测项目中 是否有多余代码 / 是否符合 eslint语法规范等等 

  • 在 package.json 的 scripts中存储了常用的命令：

  "scripts": {
    "start": "yarn serve",
    "dev": "yarn serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint --cache",
    "slint": "stylelint 'src/**/*.vue' 'src/**/*.less' --config '.stylelintrc.js' --fix",
    "log": "conventional-changelog --config ./node_modules/vue-cli-plugin-commitlint/lib/log -i CHANGELOG.md -s -r 0",
    "cz": "git add . && git cz"
  }

  • 比如执行 lint，就采取 yarn vue-cli-service lint --cache （看文件提示内容）

  • 比如执行 yarn serve = npm run serve 等等

 

  • eslint 一些常见命令的含义

Trailing spaces not allowed      
删除多余的空格

Unexpected trailing comma
删除多余的逗号

Expected indentation of 2 spaces but found 0 spaces  
期望缩进

Strings must use singlequote.
必须使用单引号

报错信息：Single attribute string is too long. Maximum allowed is 50, Expected newline before each property     
属性太多的情况下，必须进行换行处理，注意末尾最后一个>也要换，例如：

源代码：
	<a-col :key="index" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" >
报错信息： 
	7:9   error  a-col has too many attributes (6). Maximum allowed is 3, Expected newline before each property  attributes/max-attributes
   	7:47  error  ':md' should be on a new line                                                                   vue/max-attributes-per-line
   	7:56  error  ':lg' should be on a new line…      
	最后一行>不换行的报错：
	Expected 1 line break before closing bracket, but no line breaks found                                                              
修改后的风格：
        <a-col
          :key="index"
          :xs="24"
          :sm="24"
          :md="12"
          :lg="8"
          :xl="6"
        >

 

  • 用 npm安装第三方依赖失败解决方案：cnpm install moment --save

  • 缩进快捷键：shift + tab

  • git push origin -u 远程分支名字

 

  • 未解决的问题：

  • Mode:history 去除# 属性失效的问题

  • element-ui 在 vue单文本组件中样式设置失效（好像可以用/deep/解决，未实践）

  • pageheader 中的数据绑定问题

  • 整理 element-ui 表格的学习记录

 

本文地址：https://blog.csdn.net/Lyrelion/article/details/107442663

相关标签： 日记

上一篇： vscode下使用gcc进行Npcap网络编程开发的环境配置

下一篇： 2020MacBook Air和Pro有什么区别 2020MacBook Air和Pro M1芯片GPU有所不同

推荐阅读