环境安装指南

本指南将帮助你搭建前端开发环境，包括Node.js版本管理工具(nvm)、npm镜像源管理工具(nrm)、版本控制工具(Git)以及代码编辑器(VSCode)的安装和配置。

Node.js环境配置

nvm安装

在安装nvm之前，建议先卸载已有的Node.js，以避免潜在的冲突。

参考以下教程进行安装：

nrm配置

nrm是一个npm镜像源管理工具，可以帮助我们快速切换npm镜像源。

全局安装nrm：

bash

npm i nrm -g

设置npm镜像源：

bash

nvm npm_mirror https://npmmirror.com/mirrors/npm/
nvm node_mirror https://npmmirror.com/mirrors/node/

你可以在settings.txt文件中查看nvm和Node的安装路径以及镜像配置信息：

plain

root: C:\Users\admin\AppData\Roaming\nvm
arch: 64
proxy: none
originalpath: .
originalversion: 
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

nrm常用命令：

bash

# 查看可用的镜像源列表
nrm ls
  npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/

# 添加自定义镜像源
nrm add <registry> <url>
# 示例：
nrm add tb http://registry.npm.taobao.org

# 切换镜像源
nrm use [registry]

# 查看当前使用的镜像源
nrm current

# 删除镜像源
nrm del <registry>

# 测试镜像源速度
nrm test <registry>

Git安装与配置

从官方网站下载Git安装包： Git官方下载
安装完成后，配置用户信息：

bash

# 设置用户名和邮箱
git config --global user.name "your_username"
git config --global user.email "your_email@example.com"

# 查看配置信息
git config --list

# 移除配置
git config --global --unset user.name
git config --global --unset safe.directory D:/path/to/repo
git config --global --unset-all safe.directory

# 编辑配置文件
git config --global --edit
# 常用vim命令：
# :wq - 保存并退出
# :q - 退出
# :q! - 强制退出不保存

VSCode安装与配置

下载安装

从VSCode官网下载并安装。

基础配置

在settings.json中添加以下配置：

json

{
  "files.autoSave": "afterDelay",
  "diffEditor.ignoreTrimWhitespace": false,
  "javascript.validate.enable": false,
  "javascript.updateImportsOnFileMove.enabled": "never",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.semi": true,
  "prettier.singleQuote": true,
  "prettier.printWidth": 120
}

插件管理

快速安装推荐插件：创建.vscode/extensions.json文件：

json

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "Vue.volar",
    "Vue.vscode-typescript-vue-plugin",
    "formulahendry.auto-close-tag",
    "formulahendry.auto-rename-tag",
    "streetsidesoftware.code-spell-checker",
    "stylelint.vscode-stylelint",
    "DavidAnson.vscode-markdownlint"
  ]
}

导出已安装的插件列表：

bash

code --list-extensions > extensions.txt

PowerShell权限问题解决

如果遇到PowerShell执行命令权限不足的问题，按以下步骤解决：

以管理员身份运行PowerShell
执行命令：

powershell

set-ExecutionPolicy RemoteSigned

权限选择输入：A
验证权限状态：

powershell

get-ExecutionPolicy

PowerShell权限设置

包管理器缓存配置

如果需要修改包管理器的缓存位置，可以按照以下方式配置：

pnpm

bash

# 查看当前缓存路径
pnpm store path
# 清理缓存
pnpm store prune

yarn

bash

# 查看缓存目录
yarn cache dir
# 设置新的缓存目录
yarn config set cache-folder D:\.yarn-cache
# 查看配置
yarn config list
# 清理缓存
yarn cache clean

npm

bash

# 查看缓存目录
npm config get cache
# 设置新的缓存目录
npm config set cache "D:\path\to\cache"