Ubuntu 前端开发环境搭建与 Vue 实战
本指南将演示如何在 Ubuntu 系统上配置 Node.js、pnpm 及 Vue 相关开发环境,涵盖从基础依赖安装到项目启动的完整流程。
1. 系统更新与基础依赖
首先确保系统包列表是最新的,并安装必要的工具链。
# 更新系统包列表
sudo apt update
sudo apt upgrade -y
# 安装常用工具
curl wget git build-essential
2. 安装 nvm (Node Version Manager)
推荐使用官方脚本安装,这是最稳妥的方式。
方法一:使用官方脚本安装(推荐)
# 下载并运行安装脚本
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
# 或使用 wget
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
方法二:手动安装
如果网络受限,可以从 GitHub 克隆仓库。
# 从 GitHub 克隆 nvm 仓库
git clone https://github.com/nvm-sh/nvm.git ~/.nvm
cd ~/.nvm
git checkout v0.39.0
# 将以下内容添加到 ~/.bashrc
echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.bashrc
echo '[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"' >> ~/.bashrc
echo '[ -s "$NVM_DIR/bash_completion" ] && . "$NVM_DIR/bash_completion"' >> ~/.bashrc
激活 nvm
重新加载配置后验证安装,并安装 LTS 版本。
# 重新加载 bash 配置
source ~/.bashrc
# 验证安装
nvm --version
# 查看可安装的 Node.js 版本
nvm ls-remote
# 安装最新的 LTS 版本(推荐)
nvm install --lts
# 查看已安装版本
nvm ls
3. 使用 nvm 管理 Node.js
nvm 允许我们在同一台机器上切换不同版本的 Node.js,这对维护旧项目至关重要。
# 查看可安装的 Node.js 版本
nvm ls-remote
nvm install 18
nvm
nvm use 18
nvm default 18
node --version
npm --version
nvm uninstall 18


