Ubuntu 搭建前端环境&Vue实战

文章目录

- 前言
- [1. 系统更新和基础依赖](#1. 系统更新和基础依赖)
- [2. 安装 nvm (Node Version Manager)](#2. 安装 nvm (Node Version Manager))
- - 方法一：使用官方脚本安装（推荐）
  - 方法二：手动安装
  - [激活 nvm](#激活 nvm)
- [3. 使用 nvm 安装和管理 Node.js](#3. 使用 nvm 安装和管理 Node.js)
- [4. 安装 pnpm](#4. 安装 pnpm)
- - [方法一：使用 npm 安装（推荐）](#方法一：使用 npm 安装（推荐）)
  - 方法二：使用独立脚本安装
  - [配置 pnpm](#配置 pnpm)
- [5. 安装 Vue 开发环境](#5. 安装 Vue 开发环境)
- - [安装 Vue CLI（传统方式）](#安装 Vue CLI（传统方式）)
  - [使用 create-vue（Vue 官方推荐）](#使用 create-vue（Vue 官方推荐）)
- [6. 用 vite 创建 Vue 项目示例](#6. 用 vite 创建 Vue 项目示例)
- [7. 常用命令和工具](#7. 常用命令和工具)
- - [nvm 常用命令](#nvm 常用命令)
  - [pnpm 常用命令](#pnpm 常用命令)
  - [Vue 相关命令](#Vue 相关命令)
- [8. 配置优化](#8. 配置优化)
- - [创建 ~/.npmrc（可选）](#创建 ~/.npmrc（可选）)
  - [配置 shell 自动补全](#配置 shell 自动补全)
- [9. 验证安装](#9. 验证安装)
- [10. 故障排除](#10. 故障排除)
- - [nvm 命令找不到](#nvm 命令找不到)
  - 权限问题
  - 清理缓存

前言

本文讲述在 Ubuntu 上安装 nvm、pnpm 和 Vue 相关开发环境的完整配置。

1. 系统更新和基础依赖

bash 复制代码

# 更新系统包列表
sudo apt update
sudo apt upgrade -y

# 安装常用工具
sudo apt install -y curl wget git build-essential

2. 安装 nvm (Node Version Manager)

方法一：使用官方脚本安装（推荐）

bash 复制代码

# 下载并运行安装脚本
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

方法二：手动安装

bash 复制代码

# 从 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

bash 复制代码

# 重新加载 bash 配置
source ~/.bashrc

# 验证安装
nvm --version

# 查看可安装的 Node.js 版本
nvm ls-remote

# 安装最新的 LTS 版本（推荐） 这里是 v24.12.0
nvm install --lts

# 查看
nvm ls

3. 使用 nvm 安装和管理 Node.js

nvm 常用命令

bash 复制代码

# 查看可安装的 Node.js 版本
nvm ls-remote

# 安装最新的 LTS 版本（推荐） 这里是 v24.12.0
nvm install --lts

# 安装特定版本
nvm install 18  # Node.js 18.x
nvm install 20  # Node.js 20.x

# 查看已安装的版本
nvm ls

# 切换使用特定版本
nvm use 18

# 设置默认版本
nvm alias default 18

# 验证 Node.js 和 npm 安装
node --version
npm --version

# 卸载指定版本
nvm uninstall 18  # Node.js 18.x
nvm uninstall 20  # Node.js 20.x

4. 安装 pnpm

个人习惯用 pnpm 替代 npm 包管理器, pnpm 相比 npm 的主要优势在于磁盘空间效率、安装速度、依赖管理和安全性。以下是详细对比：

特性	pnpm	npm
磁盘存储	⭐ 全局存储 + 硬链接，相同包只存一份	❌ 每个项目都复制完整的依赖包
安装速度	⭐ 首次安装快（缓存机制）	⚡ 较慢（需下载解压）
依赖结构	⭐ 严格扁平化，防止幽灵依赖	❌ 扁平化导致依赖混乱
Monorepo 支持	⭐ 内置、高效	⚡ 需 Lerna/TurboRepo 等工具
安全性	⭐ 默认锁定版本，防止意外依赖提升	⚡ 可能有依赖劫持风险

方法一：使用 npm 安装（推荐）

node 默认自带有 npm , 可以用 npm 安装 pnpm , 听上去就像从 外面 招聘一个人来把 自己 给干掉

bash 复制代码

# 使用 npm 全局安装 pnpm
npm install -g pnpm

# 验证安装
pnpm --version

方法二：使用独立脚本安装

bash 复制代码

# 使用 curl
curl -fsSL https://get.pnpm.io/install.sh | sh -

# 或使用 wget
wget -qO- https://get.pnpm.io/install.sh | sh -

配置 pnpm

最重要的就是配置 国内镜像源

因为在国内访问下载外国资源是很慢的, 推荐国内淘宝镜像 https://registry.npmmirror.com

bash 复制代码

# 查看 pnpm 配置
pnpm config list

# 设置淘宝镜像（可选，国内用户推荐）
pnpm config set registry https://registry.npmmirror.com

# 设置全局安装目录
pnpm config set global-dir ~/.pnpm-global
pnpm config set store-dir ~/.pnpm-store

# 添加到 PATH
echo 'export PATH="$HOME/.pnpm-global:$PATH"' >> ~/.bashrc
source ~/.bashrc

pnpm setup
source ~/.bashrc

5. 安装 Vue 开发环境

vue 是国内很流行的一款用于构建用户界面的 JavaScript 框架, 详细学习请参考 Vue 官方文档

安装 Vue CLI（传统方式）

bash 复制代码

# 使用 npm 安装 Vue CLI
npm install -g @vue/cli

# 或使用 pnpm
pnpm add -g @vue/cli

# 验证安装
vue --version

使用 create-vue（Vue 官方推荐）

bash 复制代码

# 创建新的 Vue 项目
npm create vue@latest
# 或
pnpm create vue@latest

# 按照提示进行项目配置

6. 用 vite 创建 Vue 项目示例

创建项目

bash 复制代码

# 创建一个新的 Vue 3 项目
pnpm create vite@latest my-vue-app

项目结构

bash 复制代码

.
├── index.html
├── package.json
├── public
│   └── vite.svg
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.ts
│   └── style.css
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

运行

bash 复制代码

# 进入项目目录
cd my-vue-app

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

运行之后访问地址, 例如 http://localhost:5173/

7. 常用命令和工具

nvm 常用命令

bash 复制代码

# 列出已安装的 Node.js 版本
nvm list

# 安装指定版本
nvm install 18.17.0

# 使用指定版本
nvm use 18.17.0

# 设置默认版本
nvm alias default 18.17.0

# 在当前版本运行命令
nvm run 18.17.0 app.js

pnpm 常用命令

bash 复制代码

# 安装依赖
pnpm install
pnpm add package-name          # 添加到 dependencies
pnpm add -D package-name       # 添加到 devDependencies
pnpm add -g package-name       # 全局安装

# 运行脚本
pnpm run script-name
pnpm dev                       # 开发模式
pnpm build                     # 生产构建

# 清理
pnpm store prune               # 清理 store

# 升级包
pnpm update
pnpm update package-name

Vue 相关命令

bash 复制代码

# 创建项目
vue create project-name
npm create vue@latest
pnpm create vue@latest

# 项目内常用命令
pnpm dev        # 启动开发服务器
pnpm build      # 构建生产版本
pnpm preview    # 预览生产构建
pnpm test       # 运行测试

8. 配置优化

创建 ~/.npmrc（可选）

bash 复制代码

# 创建或编辑 ~/.npmrc
nano ~/.npmrc

# 添加以下内容（国内用户建议）
registry=https://registry.npmmirror.com/
sass_binary_site=https://npmmirror.com/mirrors/node-sass/
electron_mirror=https://npmmirror.com/mirrors/electron/

配置 shell 自动补全

bash 复制代码

# 为 pnpm 启用自动补全
pnpm install-completion

# 按照提示选择你的 shell (bash, zsh, fish)
# 通常需要重启终端或重新加载配置
source ~/.bashrc

9. 验证安装

创建一个测试脚本验证所有组件：

bash 复制代码

# 创建测试文件
cat > test-env.js << 'EOF'
console.log('Node.js version:', process.version);
console.log('NPM version:', require('child_process').execSync('npm --version').toString().trim());
console.log('PNPM version:', require('child_process').execSync('pnpm --version').toString().trim());

try {
  const vueVersion = require('child_process').execSync('vue --version').toString().trim();
  console.log('Vue CLI version:', vueVersion);
} catch {
  console.log('Vue CLI: Not installed or not in PATH');
}
EOF

# 运行测试
node test-env.js

10. 故障排除

nvm 命令找不到

bash 复制代码

# 重新加载 shell 配置
source ~/.bashrc
source ~/.profile

权限问题

bash 复制代码

# 修复 npm 全局安装权限
npm config set prefix ~/.npm-global
echo 'export PATH="$HOME/.npm-global/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

清理缓存

bash 复制代码

# 清理 npm 缓存
npm cache clean --force

# 清理 pnpm 缓存
pnpm store prune