Vue2 项目 —— 前端监控项目问题记录

最新推荐文章于 2023-07-28 09:59:43 发布

Lyrelion

最新推荐文章于 2023-07-28 09:59:43 发布

阅读量1.8k

点赞数

分类专栏：初遇你文章标签： vue2

本文链接：https://blog.csdn.net/Lyrelion/article/details/107442663

版权

初遇你专栏收录该内容

30 篇文章 4 订阅

订阅专栏

目录

1. 使用某公司内部封装的 CLI 初始化项目的过程

2. ! [remote rejected] master -> master (pre-receive hook declined)

3. 该项目组内部的 ESLint 配置

4. npm 安装依赖失败的问题，如 echarts / ant-design 等等

5. pv / uv / ip 名词解释及关系

6. 完成某个功能分支后，需要指回给某个人，发起合并请求

7. 在 package.json 的 scripts 中存储了项目操作命令

8. ESLint 遇到的报错及含义

9. Merge Requests 代码评审

10. Vue 中，检测对象属性 / 数组元素的改变

11. 系统按键修饰符 / 鼠标按键修饰符 / 精确按键修饰符

1. 使用某公司内部封装的 CLI 初始化项目的过程

全局安装公司内部封装的脚手架（CLI）：
meowtea@MeowdeMacBook-Pro % sudo npm install mainto-cli -g --registry https://npm.c...

在桌面上，使用 CLI 初始化某项目：
meowtea@MeowdeMacBook-Pro Desktop % mainto init data-monitoring

下面是初始化项目示例：
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
Generation failed. Error: 'git clone' failed with status 128
报错原因：没有权限，找管理员开通即可

2. ! [remote rejected] master -> master (pre-receive hook declined)

场景再现：将代码提交到远程仓库时，出现的报错
报错原因：远程仓库没有 master分支 / 主人未开通权限

3. 该项目组内部的 ESLint 配置
  {
      //主题设置
      "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
          }
      },
      // 文件作者
      "fileheader.Author": "JiaoShouf2e",
      // 文件最后修改者
      "fileheader.LastModifiedBy": "JiaoShouf2e",
  
      // 是否为JavaScript文件开启eslint检测
      "eslint.enable": true,
      // 保存之后进行lint
      "eslint.run": "onSave",
      // 是否启用eslint的调试模式
      "eslint.debug": true,
      // 保存文件时进行修复 （MacOS：快捷键是 command + s）
      "editor.codeActionsOnSave":{
        "source.fixAll.eslint": true
      },
  }
4. npm 安装依赖失败的问题，如 echarts / ant-design 等等

下载过慢，会导致依赖安装失败

可以尝试下面两种解决方案：

cnpm（安装源切换到淘宝源）—— cnpm install xxx
yarn（类似 npm 的工具，下载更快）—— yarn add xxx

5. pv / uv / ip 名词解释及关系

PV（访问量）：Page View，页面浏览量 / 点击量，页面刷新一次，流量统计工具显示的PV就 +1
UV（独立访客）：Unique Visitor，访问网站的一台电脑客户端为一个访客，00:00-24:00 内相同客户端只被计算一次
关系：一个 UV 可以用很多 PV，一个 UV / PV 只能对应一个IP

6. 完成某个功能分支后，需要指回给某个人，发起合并请求

7. 在 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",
  }
比如执行 lint，就采取 yarn vue-cli-service lint --cache
比如执行 yarn serve = npm run serve 等等

8. 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

<a-col :key="index" :xs="24" :sm="24" :md="12" :lg="8" :xl="6"></a-col>


<a-col 
  :key="index"
  :xs="24"
  :sm="24"
  :md="12"
  :lg="8"
  :xl="6"
></a-col>
9. Merge Requests 代码评审

10. Vue 中，检测对象属性 / 数组元素的改变

对象：
直接这么写不是响应式的，无法触发视图更新：app.userInfo.height = '180cm'
添加响应式属性的方法：Vue.set(object, key, value)
例如：Vue.set(app.userInfo, "height", "170cm");

数组：
直接这么写不是响应式的，无法触发视图更新：app.item.length = 2 / app.items[1] = "x"
添加响应式属性的方法：Vue.set(vm.items, indexOfItem, newValue);
例如：vm.items.splice(indexOfItem, 1, newValue);

11. 系统按键修饰符 / 鼠标按键修饰符 / 精确按键修饰符

系统按键修饰符：.ctrl/ .alt/ .shift/ .meta
鼠标按键修饰符：.left / .right / .middle
精确按键修饰符：.exact

举个栗子：
<button @click.ctrl="alert('同时按了 ctrl键和其他键，也可以触发')" >
<button @click.ctrl.exact="alert('不能同时按其他键，只能同时按下 ctrl键，才能触发')" >