前端学习

前端环境搭建

# 前端环境搭建

# 前端运行环境和工具

1、node.js 是一个开源跨平台的 JavaScript 运行时环境，可以理解成 java 中的 jdk；

官网：https://nodejs.org/ (opens new window)

2、npm 是 JavaScript 依赖包管理工具，可以进行前端项目的打包、依赖下载等，可以理解成 java 中的 maven；

官网：https://www.npmjs.com/ (opens new window)

3、Vite 是快速构建前端 Vue 项目的脚手架，可以理解为开发 Spring Boot 的 Spring Initializr 快速构建工具；

官网：https://cn.vitejs.dev/ (opens new window)

相较于后端，如表格所示：

前端 Vue	后端 Java
node.js	jdk
npm	maven
vite	Spring Initializr

# 安装 Node.js

下载：nodejs官方网站 (opens new window)

安装：解压即完成安装；(使用的是 zip 压缩包)

Nodejs 环境变量配置（目录自定义）

1、在 D:\software\node-v20.12.0-win-x64 下创建 2 个文件夹：

node_global （依赖库）
node_cache （缓存）

2、在 D:\software\node-v20.12.0-win-x64 目录下 cmd 进入命令行窗口，执行：

npm config set prefix "D:\software\node-v20.12.0-win-x64\node_global"

npm config set cache "D:\software\node-v20.12.0-win-x64\node_cache"

1
2
3

3、查看有没有设置成功：

npm config get prefix

npm config get cache

1
2
3

4、配置环境变量 Path，在 Path 变量中添加如下路径：

D:\software\node-v20.12.0-win-x64 

D:\software\node-v20.12.0-win-x64\node_global

1
2
3

在任意目录打开 windows 窗口查看是否配置成功：

node -v

npm -v

1
2
3

⚠️注：Node.js 已经自带 npm，安装 Node.js 时即已安装了 npm，故不需要再安装 npm；

# nvm

nvm（Node Version Manager）是一个用于管理多个 Node.js 版本的工具。它允许你在同一台机器上轻松安装、管理和切换不同的 Node.js 版本，这对于需要在不同项目中使用不同版本 Node.js 的开发者来说非常有用。

# nvm 的主要功能

安装多个 Node.js 版本：你可以安装多个版本的 Node.js，并根据需要进行切换。
设置默认 Node.js 版本：可以指定一个默认使用的 Node.js 版本。
按项目设置 Node.js 版本：每个项目目录下可以通过 .nvmrc 文件指定该项目所需的 Node.js 版本。
自动切换 Node.js 版本：当进入包含 .nvmrc 文件的项目目录时，nvm 可以自动切换到该文件中指定的 Node.js 版本。

# 安装 nvm

可参考网上教程：nvm安装详细教程（安装nvm、node、npm、cnpm、yarn及环境变量配置）-CSDN博客 (opens new window)

# 在 macOS 和 Linux 上安装 nvm

通过脚本安装：

打开终端并运行以下命令来安装最新版本的 nvm：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

或者使用 wget：

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

加载 nvm：

安装完成后，关闭并重新打开你的终端，或者手动加载 nvm 到当前 shell 会话中：

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

1
2

验证安装：
- 确认 nvm 是否正确安装：
```
command -v nvm
```
  1

# 在 Windows 上安装 nvm

对于 Windows 用户，推荐使用 nvm-windows，它是专门为 Windows 设计的 Node.js 版本管理器。

下载和安装：
- 访问 nvm-windows GitHub Releases (opens new window) 页面下载最新的安装包。
- 按照安装向导完成安装。
使用 nvm-windows：
- 安装后，你可以在命令提示符或 PowerShell 中使用 nvm 命令来管理 Node.js 版本。
主要的环境配置：
- NVM_HOME
- NVM_SYMLINK

# 常用命令

参考：nvm使用小结 | 沉梦听雨的编程指南 (opens new window)

⚠️注意事项：

后续安装的 pnpm 和 yarn，可以在 node_globel 目录下看到

每个版本的 node.js 都会在 nvm 下有个对于的版本文件夹，里面都会包含 node_global 和 node_cache 这两个目录

# 安装 Yarn

使用 npm 安装
- 你可以直接通过 npm 来全局安装 Yarn：
```
npm install --global yarn
```
  1
验证安装
- 同样在命令行中输入以下命令来验证 Yarn 是否安装成功：
```
yarn --version
```
  1

# 安装 pnpm

使用 npm 安装
- 类似于 Yarn，你可以通过 npm 全局安装 pnpm：
```
npm install -g pnpm
```
  1
验证安装
- 使用以下命令确认 pnpm 已经正确安装：
```
pnpm --version
```
  1

# 设置镜像源

淘宝 NPM 镜像现在已经迁移至 npmmirror，旧的淘宝镜像域名已经停止服务。新的镜像地址如下：

新的镜像站地址：https://npmmirror.com/
新的注册表地址：https://registry.npmmirror.com/

# 设置使用 npmmirror

要将你的 npm 配置为使用 npmmirror 作为默认源，你可以按照以下步骤操作：

# 如果你需要切换回官方 npm 源，可以使用如下命令：
npm config set registry https://registry.npmjs.org/

# npm 设置镜像源
npm config set registry https://registry.npmmirror.com
# yarn 设置镜像源
yarn config set registry https://registry.npmmirror.com
# pnpm 设置镜像源
pnpm config set registry https://registry.npmmirror.com

# 验证设置是否成功
npm config get registry
yarn config get registry
pnpm config get registry

1
2
3
4
5
6
7
8
9
10
11
12
13
14

如果返回的是 https://registry.npmmirror.com，则表示你已经成功配置了 npm 使用 npmmirror。

# 注意事项

权限问题：如果你遇到权限错误（特别是在 macOS 或 Linux 上），可以尝试添加 sudo 前缀（例如 sudo npm install -g pnpm），或者考虑使用 nvm (Node Version Manager) 来管理 Node.js 环境，它可以在不需要管理员权限的情况下安装和更新 Node.js 及其包管理器。
环境变量：确保 Node.js、Yarn 和 pnpm 的安装路径已经被添加到系统的 PATH 环境变量中。这通常是在安装过程中自动完成的，但如果你手动安装了这些工具，则可能需要自己添加。
版本管理：对于不同的项目可能需要不同版本的 Node.js 和依赖库，推荐使用 nvm (Node Version Manager) 或者 fnm (Fast Node Manager) 来管理和切换 Node.js 版本。
代理设置：如果你在中国或其他网络受限的地区，可能会发现从官方源下载非常慢。这时可以考虑配置镜像源，例如淘宝 NPM 镜像，来加速下载速度。

上次更新: 2024/12/20 18:14:13

HTML与CSS→