从零开始配置前端环境及必要软件安装

- - 一、安装编辑器
  - 二、安装浏览器
  - 三、安装Git版本控制工具
  - [四、Node.js 和 npm 环境变量配置](#四、Node.js 和 npm 环境变量配置)
  - - [1. 安装 Node.js 和 npm](#1. 安装 Node.js 和 npm)
    - [2. 配置全局模块和缓存目录](#2. 配置全局模块和缓存目录)
    - [3. 设置环境变量](#3. 设置环境变量)
    - [4. 更换 npm 镜像源](#4. 更换 npm 镜像源)
    - [5. 测试配置](#5. 测试配置)
  - 五、hosts文件
  - 六、辅助应用
  - - markdown（笔记工具）

一、安装编辑器

vscode

安装必备的vscode插件：

必备插件
- Chinese (Simplified) Language Pack for Visual Studio Code：汉化包
- ESLint：代码检查工具 ，可以帮助开发者检查语法错误和规范代码风格，并提供修复建议。它支持多种 JavaScript 规范，如 Airbnb、Google、Standard 等。在 VS Code 中使用 ESLint 插件可以实现实时代码检查和错误提示，提高代码质量。
- Prettier：代码格式化工具，用于自动格式化代码，可以统一代码风格。
- Bracket Pair Colorizer：括号匹配插件，用于给括号添加颜色，方便查看代码结构。
- Auto Rename Tag：HTML 标签重命名插件 ，用于自动重命名 HTML 标签，避免手动修改。
- GitLens：Git 代码库插件 ，用于显示 Git 代码库的详细信息、代码中的Git历史和注释，方便版本控制。
- Path Intellisense：文件路径自动补全插件，可以帮助开发者快速输入文件路径，提高开发效率。
- Debugger for Chrome: 用于在Visual Studio Code中调试JavaScript代码。
- 小程序开发助手：微信小程序代码提示工具。
Vue.js 插件
- Vetur：是一个 Vue.js 开发插件，可以帮助开发者更好地编写 Vue 组件。它提供了 语法高亮 、自动补全 、错误检查 、代码格式化 等功能，使开发者可以更快速地编写 Vue 代码。
- Vue 3 Snippets：是一个 Vue.js 3 代码片段插件 ，可以帮助开发者更快速地编写 Vue 3 代码。它提供了 Vue 3 组件 、指令 、生命周期 等常用代码片段，使开发者可以更快速地编写 Vue 3 代码。
- Vue Peek：是一个 Vue.js 开发插件，可以帮助开发者 更快速地查看 Vue 组件的定义 。它可以在模板中快速跳转到组件定义，使开发者可以更快速地了解组件的结构和属性。
React 插件
- ES7 React/Redux/GraphQL/React-Native snippets：是一个 React 开发插件，可以帮助开发者更快速地编写 React 代码。它提供了 React 组件 、生命周期 、状态管理 等 常用代码片段，使开发者可以更快速地编写 React 代码。
- Reactjs code snippets：是一个 React 开发插件，可以帮助开发者更快速地编写 React 代码。它提供了 React 组件 、生命周期 、**状态管理**等常用代码片段，使开发者可以更快速地编写 React 代码。
- React-Native/React/Redux snippets for es6/es7：是一个 React Native 开发插件，可以帮助开发者更快速地编写 React Native 代码。它提供了 React Native 组件、生命周期、状态管理等常用代码片段，使开发者可以更快速地编写 React Native 代码。

二、安装浏览器

Google Chrome

安装浏览器插件：

Vue.js devtools：vue 开发调试工具
React Developer Tools：react 开发调试工具
Redux DevTools：redux 开发调试工具
JSON-handle：快捷预览 json 接口工具
Octotree - GitHub code tree：目录形式预览github仓库工具

三、安装Git版本控制工具

下载完成后，双击安装包并按照指引完成安装。
打开命令行工具，运行 git --version 查看 Git 的版本号，确保安装成功并显示相应的版本号。
在使用 Git 之前，还需要进行一些基本的配置，如设置用户名和邮箱地址。可以使用以下命令进行配置：
复制代码
```
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"
```

四、Node.js 和 npm 环境变量配置

配置 Node.js 和 npm 的环境变量是确保其正常运行的重要步骤。以下是详细的配置方法：

1. 安装 Node.js 和 npm

从 Node.js 官网下载适合您操作系统的安装包。

安装时勾选 Add to PATH 选项，这会自动将 Node.js 添加到系统环境变量中。

安装完成后，打开命令提示符，输入以下命令检查版本：

复制代码

node -v
npm -v

2. 配置全局模块和缓存目录

为了避免默认情况下 npm 将全局模块安装到用户目录（如 C:\Users\<用户名>\AppData\Roaming\npm），建议将全局模块和缓存目录设置到 Node.js 的安装路径下。

步骤：

在 Node.js 的安装目录下创建两个文件夹： node_global：用于存储全局模块。 node_cache：用于存储缓存文件。
配置 npm 的全局路径和缓存路径：

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
验证配置是否成功：

npm config list

3. 设置环境变量

为确保系统能够正确识别 npm 全局模块路径，需要手动配置环境变量。

步骤：

打开 系统属性 > 高级系统设置 > 环境变量。
在 系统变量 中：
- 新建变量 NODE_PATH，值为：
  
  D:\Program Files\nodejs\node_modules
- 编辑 Path 变量，添加以下路径：
  
  D:\Program Files\nodejs\node_global
  D:\Program Files\nodejs\node_cache

4. 更换 npm 镜像源

国内用户建议使用淘宝镜像源以加快下载速度：

复制代码

npm config set registry https://registry.npmmirror.com

验证是否成功：

复制代码

npm config get registry

5. 测试配置

安装一个全局模块（如 Express）测试配置是否生效：

复制代码

npm install -g express

如果安装成功且无报错，说明配置完成。

注意事项

确保路径中不要包含空格，以免引发不必要的问题。
如果修改后未生效，请重启计算机或重新打开命令提示符。

五、hosts文件

win+R输入C:\Windows\System32\drivers\etc，会跳转到hosts文件

右键hosts文件，点击属性->安全，提高当前账户的权限，能够修改hosts文件。

用记事本打开，例如在文件最后一行添加：

复制代码

127.0.0.1 localhost.midea.com

保存之后，为了使修改生效，需要刷新DNS缓存：

复制代码

ipconfig /flushdns

这将清除本地DNS缓存，使

六、辅助应用

markdown（笔记工具）

Typora