web开发安装与环境配置（详细）

一、代码编写工具 VsCode

下载地址：https://code.visualstudio.com/Download
插件：

1. Auto Import：自动去查找、分析、然后提供代码补全。对于TypeScript和TSX，可以适用。

2. Prettier：你绝对不能少了这个插件，你需要它来一键美化你的JavaScript/TypeScript/CSS代码。

3. vscode-icons：Icon集合

4. JS-CSS-HTML Formatter：每次保存，都会自动格式化js css 和html 代码

5. Chinese (Simplified) Language Pack ——汉化包
   注意：安装成功后右下角会提示重启，一定要点重启，否则要另外手动设置
   使用快捷键在Ctrl+Shift+p 打开命令面板 输入“config” 进入locale.json（配置显示语言）
   将"locale"设置为"locale":“zh-cn”
   
   

6. ESLint ——代码风格
   

7. open in browser——打开默认浏览器
   
   搜索open in browser，然后在下方填写想要设置的浏览器名称，设置谷歌浏览器就填写Chrome,火狐浏览器填Firefox
   注意，建议不要修改Chrome/Firefox的安装位置

8. 设置tab间隔缩进
   

9. 设置字体大小
   

10. 颜色主题
    

11. setting.json

    	{
      /* 配置 terminal 为 Git */
      "terminal.integrated.profiles.windows": {
        "Git-Bash": {
          "path": "D:\\Develop\\Git\\bin\\bash.exe",
          "args": []
        }
      },
      "terminal.integrated.defaultProfile.windows": "Git-Bash",
      "code-runner.runInTerminal": true,
      /* 配置编辑器字体、贯标 */
      "editor.fontSize": 16,
      "editor.lineHeight": 20,
      "editor.letterSpacing": 0.5,
      "editor.fontWeight": "400",
      "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",
      "editor.fontLigatures": true, // 连体字
      "editor.tabSize": 2,
      "editor.cursorStyle": "line",
      "editor.cursorWidth": 5,
      "editor.cursorBlinking": "solid", // 光标动画样式
      "editor.suggestSelection": "first",
      "editor.wordWrap": "on", // 视区自动折行
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.detectIndentation": false, // 打开文件时不自动检查tabSize
      // "editor.formatOnSave": true, // 自动格式化
      "terminal.integrated.fontSize": 15,
      "files.autoSave": "onFocusChange", // 文件焦点变化自动保存
      /* 配置编辑器样式 */
      "window.zoomLevel": 0, // 窗口缩放级别
      "explorer.compactFolders": false, // 紧凑显示名称
      "workbench.iconTheme": "material-icon-theme",
      "workbench.colorTheme": "Snazzy Operator",
      "workbench.sideBar.location": "right",
      "indentRainbow.colors": [
        "rgba(255,255,64,0.07)",
        "rgba(127,255,127,0.07)",
        "rgba(255,127,255,0.07)",
        "rgba(79,236,236,0.07)"
      ],
      /* 配置格式化 */
      "prettier.singleQuote": true, // 使用单引号
      "prettier.semi": false, // 使用分号
      "prettier.arrowParens": "avoid", // (x) => {} 只有一个参数省略括号
      "prettier.tabWidth": 2,
      "prettier.printWidth": 100,
      /* 配置编辑器确认方式 */
      "open-in-browser.default": "chrome",
      "liveServer.settings.CustomBrowser": "chrome",
      "git.confirmSync": false, // 同步 Git 是否确认
      "explorer.confirmDelete": false, // 删除文件是否确认
      "security.workspace.trust.untrustedFiles": "open", // 允许打开不信任文件
      "javascript.updateImportsOnFileMove.enabled": "always", // 移动文件更新导入路径
      /* 文件不会显示在工作空间中 */
      "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.DS_Store": true,
        "**/.vscode": true,
        "node_modules": true,
        "target": true,
        "logs": true
      },
      /* 搜索功能时，文件夹/文件排除在外 */
      "search.exclude": {
        "**/node_modules": true,
        "**/target": true,
        "**/logs": true,
        "**/dist": true
      },
      "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
      },
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "vue",
        "html",
        "jsx"
      ],
      "typescript.locale": "en"
    }
    

12. jsconfig.json

绝对路径、相对路径跳转需要在根目录增加 jsconfig.json 文件
~~~js
{
“compilerOptions”: {
“baseUrl”: “.”,
“paths”: {
“@/“: [”./src/”]
},
“target”: “ES6”,
“module”: “commonjs”,
“allowSyntheticDefaultImports”: true
},
“include”: [“src/**/*”],
“exclude”: [“node_modules”, “dist”]
}
~~~

13. 其他快捷操作的配置
    快捷键：文件 -> 首选项 -> 键盘快捷方式
    代码块：文件 -> 首选项 -> 用户代码片段

    	// vue.json.code-snippets
    	{
    	// Example:
    	"Vue quick key": {
    		"prefix": "vue",
    		"body": [
    			"<template>",
    			"  <div>$0</div>",
    			"</template>",
    			"",
    			"<script>",
    			"/* eslint-disable */",
    			"export default {",
    			"  components: {},",
    			"  props: {},",
    			"  data() {",
    			"    return {",
    			"    };",
    			"  },",
    			"  watch: { ",
    			" },",
    			"  computed: { ",
    			" },",
    			"  methods: { ",
    					"// 事件 ",
    			" },",
    			"  created(){ ",
    			"},",
    			"  mounted() { ",
    				"// 钩子，挂载模板",
    			" },",
    			"  updated(){ // 数据更新 ",
    			"},",
    			"  destroyed(){ // 销毁解绑 ",
    			"},",
    			"};",
    			"</script>",
    			"<style scoped>",
    			"</style>"
    		],
    		"description": "A vue file template"
    	},
    	"uniApp quick key": {
    		"prefix": "uniApp",
    		"body": [
    			"<template>",
    			"  <view>$0<iew>",
    			"</template>",
    			"",
    			"<script>",
    			"/* eslint-disable */",
    			"export default {",
    			"  components: {},",
    			"  props: {},",
    			"  data() {",
    			"    return {",
    			"    };",
    			"  },",
    			"  watch: {},",
    			"  computed: {},",
    			"  onLoad() {},",
    			"  onShow() {},",
    			"  methods: {},",
    			"  created(){},",
    			"  mounted() {},",
    			"};",
    			"</script>",
    			"<style  lang='scss'>",
    			"</style>"
    		],
    		"description": "A vue file template"
    	},
    	"clog quick key": {
    		"prefix": "clog",
    		"body": [
    			"console.log($0)"
    		],
    		"description": "A vue file template"
    	},
    	"alert quick key": {
    		"prefix": ".clog",
    		"body": [
    			"alert($0)"
    		],
    		"description": "A vue file template"
    	},
    	"data quick key": {
    		"prefix": "data()",
    		"body": [
    			"data() {",
    			"  return {",
    			"     $0",
    			"  };",
    			"},",
    		],
    		"description": "A vue file template"
    	},
    }
    

二、代码运行环境 Node

nvm安装与卸载

通常在实际业务中需要使用多个不同版本，重复卸载安装很费时，而nvm 则是用来管理 nodejs 版本的管理工具，可以安装多个node版本，可以对开发环境的node版本中快速的切换
注意，非常重要的一点，如以前安装过node.js一定要完全卸载，不留一点痕迹

第一步：卸载node.js

1. 卸载系统设置中的nodejs
2. 检查C盘根目录是否还有残留node相关文件
   默认是C:\Program Files\nodejs，也可能在其他盘，主要取决于安装时的选择。
   查看该路径下是否有node文件，我这里已经没有了，在控制面板卸载node后一般会自动删除node文件，如果文件还在的话就手动删除。
3. 查找.npmrc文件是否存在，删除掉
   一般在C:\用户\“用户名”直接搜索“.npmrc”
4. 逐一查看一下文件是否存在，存在就删除
   C:\Program Files (x86)\Nodejs
   C:\Program Files\Nodejs
   C:\Users\用户名\AppData\Roaming\npm
   C:\Users\用户名\AppData\Roaming\npm-cache
5. 打开系统设置，检查系统环境变量，将npm、node的所有环境变量相关的配置都删掉
   一般系统会自动把node环境变量删掉了，可以不用管这步。
   环境变量打开方式：控制面板 -> 搜索“高级系统设置” -> 环境变量
   删除用户变量的path里的node路径和系统变量中的node路径
   
6. 查看nodejs是否还存在
   在cmd中输入node -v

第二步：安装nvm
安装包下载地址：https://github.com/coreybutler/nvm-windows/releases，windows系统下载nvm-setup.zip安装包

解压后执行exe文件进行安装
第一步选择：I accept the agreement
第二步：安装路径可以自己更改，一般是默认路径
第三步：是nodejs的安装位置，要与nvm的位置一致
第四步：完成安装后，找到安装的路径，一些简单配置，打开setting.txt，在最后加入以下两行代码
第五步：在nvm文件下创建一个nodejs空文件

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

第六步：需要改变环境变量，把刚刚创建的nodejs文件加进入

nvm的使用

nvm off                     // 禁用node.js版本管理(不卸载任何东西)
nvm on                      // 启用node.js版本管理
nvm install <version>       // 安装node.js的命名 version是版本号 例如：nvm install 8.12.0
nvm uninstall <version>     // 卸载node.js是的命令，卸载指定版本的nodejs，当安装失败时卸载使用
nvm ls                      // 显示所有安装的node.js版本
nvm list available          // 显示可以安装的所有node.js的版本
nvm use <version>           // 切换到使用指定的nodejs版本
nvm v                       // 显示nvm版本
nvm install stable          // 安装最新稳定版

如果使用node -v，提示node:command not found，有2个原因

• 需要切换版本号：例如在cmd中输入nvm use 14.19.1，有时候切换不成功，可以试试以管理员的身份运行cmd
• 之前的node版本未删除干净

安装成功后输入node -v、npm -v才会显示版本号

卸载nvm
1.先删除你当初所安装的nvm的文件夹即可。
2.文件夹内右键 此电脑 – 点击属性 – 找到高级系统设置 – 环境变量。
3.删除用户变量 和 系统变量中名为 NVM_HOME 和 NVM_SYMLINK 两个变量。其他的不要改。
4.用户变量和系统变量中path中的 %NVM_HOME%;%NVM_SYMLINK% 两个属性，其他的不要改。

---

node.js安装

下载地址：https://nodejs.org/zh-cn
node.js往期版本下载地址


这一步建议直接选择：Add to PATH 添加到环境变量中

Node.js runtime：Node运行环境
corepack manager：核心包
npm package manager表示npm包管理器
Online documentation shortcuts ：在线文档快捷方式
Add to PATH：添加到环境变量.

最后配置一下环境/查看环境配置是否正确
（1）检查环境变量：控制面板——>搜索“高级系统设置”——>环境变量——>系统变量——>Path——>确保Node环境已添加——>确定——>关闭全部窗口

（2）配置环境变量
控制面板——>搜索“高级系统设置”——>环境变量——>系统变量——>新建

npm
npm是JS的包管理器，也是目前Node.js默认的包管理器。一般下载了Node.js后会附带npm，不用专门的去下载。

淘宝镜像

直接将npm切换成淘宝镜像：npm config set registry https://registry.npm.taobao.org
安装cnpm为淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org
查看当前镜像：npm config get registry
恢复nodejs官方镜像：npm config set registry https://registry.npmjs.org

一般都是用cnpm比较多

安装cnpm时有时会出错

1. syscal: ‘mkdir’
   
   以管理员身份打开cmd，或右键点击“开始”，选择“windows Powershell(管理员)”，再安装cnpm即可

2. syscall: ‘rename’
   
   安装时直接加一个指定版本即可
   npm install -g cnpm@7.1.1 --registry=https://registry.npm.taobao.org
   有时会提示“Cannot find module ‘node:util’”表示node版本较低，而cnpm版本过高，也可以直接指定安装某个版本的cnpm

三、Git/小乌龟

可在官网自行下载最新版

git安装

下载git，直接去官网下载Git - Downloads，根据自己的系统合理下载，然后一路next就可以了
1、安装完成后，右击鼠标查看如下：

2、登录用户，设置自己的用户名和邮箱地址

git config --global user.name "用户名"
git config --global user.email "邮箱"

// 查看用户是否正确
git config --global user.name
git config --global user.email

3、初次close拉项目时，会要求输入用户名和密码
用户名是你git绑定的邮箱，而不是git的用户名称

进入个人设置，找到邮箱管理

4、在现有项目中出新仓库
如果是使用的vue脚手架搭建的项目，这一步可以直接跳过，因为脚手架会帮我们完成这一步
反之，需执行以下2个步骤：
-在项目目录中，通过鼠标右键打开"Git Bash"
-执行git init 命令将当前的目录转化为Git仓库

小乌龟

安装工具小乌龟，官网：Download – TortoiseGit，也是，简单的一路next，值得一提的是要在安装完git之后，才能安装小乌龟
1、配置小乌龟

2、点击设置，把language项改为中文，然后点击确定，前提是先下载language安装包，安装后才能切换

有时会一直显示没有其他语言包，删除以下文件后重新安装language包即可

3、进入小乌龟设置在Git处填上注册时的名字与邮箱。

推送
在远端处填上刚刚在Git仓库复制的地址添加保存，后成功建立连接


填写日志勾选全部点击提交

成功后点击推送即可

四、vue

1. 调试工具：vue-devtools
   第一步：入GitHub官网进行下载，vue-devtools，下载压缩包并将安装包进行解压
   第二步：选择右上角三个圆点–选择更多工具—选择扩展程序—打开开发者模式
   
   第三步：添加至Chrome浏览器的扩展程序中去
   选择加载已解压的扩展程序-----选中你构建好后的shells/chrome
   

2. vue-cli脚手架

   npm install -g @vue/cli		安装的是5.0.8
   @vue/cli 4.5 以下的是vue2
   @vue/cli 4.5 以上的是vue3
   

3. wekbpack
   npm install -g webpack

4. vue的devTools插件
   为了更方便的在开发过程中对 Vue 程序进行调试，除了传统的浏览器自带的 debug 工具以外，我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试。

vue-devTools插件

下载地址：https://chrome.zzzmh.cn/info/nhdogjmejiglipccpnnnanhbledajbpd

首先进入浏览器设置，点击 扩展程序

下载vue-devTools插件后，进行解压
点击加载已解压的扩展程序 或者 直接拖拽已解压的扩展程序，安装成功后效果图如下：点击红框处开启

项目启动后，即可看到浏览器右上角的 Vue 插件图片，图 红框一 处，表示 Vue.js devtools 已启动，点击图 红框二 的 vue 一项

用脚手架构建项目

可以参考以下几篇文章
1、vue-cli2、vue-cli3脚手架详细讲解
2、如何使用vue-cli来搭建vue项目
3、vue脚手架@vue/cli 4.5.13(稳定版)

目前vue3已经开始运用，所以每个项目所使用的的vue版本可能不同
@vue/cli 4.5 以下的是vue2
@vue/cli 4.5 以上的是vue3

若要构建vue2的项目，如下：
截至目前，使用npm install -g @vue/cli 安装的是vue3版本，@vue/cli 5.0.8
所以我们还需要将脚手架2下载执行 npm install -g @vue/cli-init即可

vue init webpack vue2-demo
? Project name 项目名			询问项目名称，默认是输入时的那个名称vue2-demo，直接回车 
? Project description	项目描述，直接回车
? Author			作者，随便填或直接回车
? Vue build	
		Runtime + Compiler: 官方推荐选这个
        Runtime-only：要比 Compiler 轻大约6KB,而且效率要高
? Install vue-router?	是否需要安装vue-router，一般直接选安装
? Use Eslint to lint your code?	是否用ESLint来限制你的代码错误和风格。新手可不用，实际项目中都会用，多人开发要语法一致
? Pick an Eslint preset 		Standard，选择一种eslint风格，直接选第一个即可
		Standard(https://github.com/standard/standard)
		Airbnb(https://github.com/airbnb/javascript)
? Set up unit test 			是否安装单元测试 N
? Setup e2e test with Nightwatch?		是否安装e2e测试  N
? Should we run 'npm install' fro you after the project has been created  		询问我们管理项目是用npm 还是yarn，一般选npm

五、小程序开发者工具

微信开发者工具

Hbuilderx

六、浏览器

谷歌/火狐：官网下载