#1.Node.js

• 1.官网下载 Node.js (opens new window)（以 windows 系统 64 位为例）

  

• 2.安装 Node.js（注意有时有问题需要注意环境变量的配置）

• 3.cmd 中查看 node 版本，校验安装成功后，升级 npm

  node -vnpm install -g npm@latest # npm i npm -g

  1
  2
  

#2.版本控制

• 版本规范 挑选稳定版本 记录版本号 如果版本升级，需要总结版本差异

#2.1 安装 Git

• Git 官网 (opens new window)下载 git 进行安装

• 常用命令

• 代码合并提交

• 创建分支、切分支

• 临时存储

#3.编辑器

#3.1 安装配置 vscode

• 1.官网下载：https://code.visualstudio.com(opens new window)

• 2.安装时勾选选项后，不需要拖动代码文件、或项目目录到编辑器，就可以直接用鼠标右键打开目标

  

• 3.使用自带的终端 + bash 运行命令

  

  建议使用 vscode 自带的终端，快捷键ctl+～,右边下角操作完成后可以直接运行命令（同 cmd 上操作）

  

• 4.安装插件

• Vue 2 Snippets：Vue2 代码片段补全

• Document This: 能够一键给代码中的类、函数加上注释，支持函数声明、函数表达式、箭头函数等

• Auto Close Tag：自动添加 HTML / XML 关闭标签

• Auto Rename Tag：自动重命名配对的 HTML / XML 标签

• Beautify：格式化代码

• Bracket Pair Colorizer：颜色识别匹配括号

• Code Runner：运行多种语言的代码片段或代码文件

• Chinese (Simplified) Language Pack for Visual Studio Code：中文简体语言包

• Color Info：提供你在 CSS 中使用颜色的相关信息

• CSS Peek：使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码

• Debugger for Chrome：前端调试

• ESLint：EsLint 可以帮助我们检查 Javascript 编程时的语法错误

• filesize：在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间

• Git History：以图表的形式查看 git 日志

• GitLens — Git supercharged：显示文件最近的 commit 和作者，显示当前行 commit 信息

• HTML CSS Support：html 代码自动补全以及 class 智能提示

• HTMLHint：HTML 代码格式检测

• HTML Snippets：代码自动填充

• Image Preview：鼠标移到路径里显示图像预览

• JavaScript (ES6) code snippets：es6 代码片段

• Live Server：浏览器实时刷新

• Vetur：Vue 语法高亮显示, 语法错误检查, 代码自动补全

• vscode-fileheader：顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间，快捷键: Ctrl+Alt+i (默认信息可在 文件 → 首选项 → 设置 中修改)

• 5.配置参数

  settins.json

  {
    "editor.quickSuggestions": {
      //开启自动显示建议
      "other": true,
      "comments": true,
      "strings": true
    }, // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false, // 重新设定tabsize
    "editor.tabSize": 2, // 每次保存的时候自动格式化
    "editor.formatOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
    "eslint.autoFixOnSave": true, // 添加 vue 支持
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
        "language": "html",
        "autoFix": true
      },
      {
        "language": "vue",
        "autoFix": true
      }
    ], // 让prettier使用eslint的代码格式进行校验
    "prettier.eslintIntegration": true, // 去掉代码结尾的分号
    "prettier.semi": false, // 使用单引号替代双引号
    "prettier.singleQuote": true, // 让函数(名)和后面的括号之间加个空格 // "javascript.format.insertSpaceBeforeFunctionParenthesis": false, // html格式化，这个按用户自身习惯选择
    "vetur.format.defaultFormatter.html": "js-beautify-html", // 让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_attributes": "force-aligned" // vue组件中html代码格式化样式
      }
    },
    "search.exclude": {
      "**/node_modules": true,
      "**/bower_components": true,
      "**/dist": true
    },
    "emmet.syntaxProfiles": {
      "javascript": "jsx",
      "vue": "html",
      "vue-html": "html"
    }, // 设置字体 // "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'", // vscode 程序title位置显示内容，这里设置了显示路径
    "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", // 编辑器建议 显示在头部
    "editor.snippetSuggestions": "top",
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "beautify.ignore": "",
    "editor.fontSize": 20}

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  

#3.2 实用功能

• 代码对比

• 右键需要比较的文件弹框选择选择以进行比较

• 右键目标文件弹框选择与已选项目进行比较

  

#3.3 批量替换

支持使用正则方式进行复杂场景的替换，对大型项目中批量修改非常高效

#3.4 调试代码

可以直接在 vscode 中 debugger，更加直观感受整个代码运行流程

#4.谷歌浏览器

• 跨域，方便本地开发解决跨域问题参考资料(opens new window)

• 相关调试技巧：developer tool

• 查看页面性能：LightHouse

• vue 代码调试插件：vue-devtools

• vue 页面性能测试插件：Vue performance Devtool

#5.npm

rm -rf node_modules #一些常见的命令操作需不能在cmd中执行，如删除依赖这个命令需要在bash中使用

#5.1 npm

• npm(node package manage)是 nodejs 自带的包管理工具。

• package.json

• ~会匹配最近的小版本依赖包，比如~1.2.3 会匹配所有 1.2.x 版本，但是不包括 1.3.0

• ^会匹配最新的大版本依赖包，比如^1.2.3 会匹配所有 1.x.x 的包，包括 1.3.0，但是不包括 2.0.0

• *这意味着安装最新版本的依赖包

#5.2 cnpm

npm i --registry=https://registry.npm.taobao.org #可以在安装包的时候指定下载源npm config set registry https://registry.npm.taobao.org #改变全局默认下载地址npm install cnpm -g --registry=https://registry.npm.taobao.org

• cnpm 不受 package-lock.json 影响，只会根据 package.json 进行下载

#5.3 yarn

• 有时候通过 cnpm 下载的包莫名不能用， 可以换用 yarn 解决这个问题

#5.4 pnpm

• pnpm 速度快