Ubuntu 搭建前端环境&Vue实战
文章目录
前言
本文讲述在 Ubuntu 上安装 nvm、pnpm 和 Vue 相关开发环境的完整配置。
1. 系统更新和基础依赖
# 更新系统包列表sudoapt update sudoapt upgrade -y# 安装常用工具sudoaptinstall-ycurlwgetgit build-essential 2. 安装 nvm (Node Version Manager)
方法一：使用官方脚本安装（推荐）
# 下载并运行安装脚本curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh |bash# 或使用 wgetwget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh |bash方法二：手动安装
# 从 GitHub 克隆 nvm 仓库git clone https://github.com/nvm-sh/nvm.git ~/.nvm cd ~/.nvm git checkout v0.39.0 # 将以下内容添加到 ~/.bashrcecho'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 配置source ~/.bashrc # 验证安装 nvm --version# 查看可安装的 Node.js 版本 nvm ls-remote # 安装最新的 LTS 版本（推荐） 这里是 v24.12.0 nvm install--lts# 查看 nvm ls
3. 使用 nvm 安装和管理 Node.js
nvm 常用命令
# 查看可安装的 Node.js 版本 nvm ls-remote # 安装最新的 LTS 版本（推荐） 这里是 v24.12.0 nvm install--lts# 安装特定版本 nvm install18# Node.js 18.x nvm install20# Node.js 20.x# 查看已安装的版本 nvm ls# 切换使用特定版本 nvm use 18# 设置默认版本 nvm alias default 18# 验证 Node.js 和 npm 安装node--versionnpm--version# 卸载指定版本 nvm uninstall 18# Node.js 18.x nvm uninstall 20# Node.js 20.x4. 安装 pnpm
个人习惯用 pnpm 替代 npm 包管理器, pnpm 相比 npm 的主要优势在于磁盘空间效率、安装速度、依赖管理和安全性。以下是详细对比：
| 特性 | pnpm | npm |
|---|---|---|
| 磁盘存储 | ⭐ 全局存储 + 硬链接，相同包只存一份 | ❌ 每个项目都复制完整的依赖包 |
| 安装速度 | ⭐ 首次安装快（缓存机制） | ⚡ 较慢（需下载解压） |
| 依赖结构 | ⭐ 严格扁平化，防止幽灵依赖 | ❌ 扁平化导致依赖混乱 |
| Monorepo 支持 | ⭐ 内置、高效 | ⚡ 需 Lerna/TurboRepo 等工具 |
| 安全性 | ⭐ 默认锁定版本，防止意外依赖提升 | ⚡ 可能有依赖劫持风险 |
方法一：使用 npm 安装（推荐）
node 默认自带有 npm , 可以用 npm 安装 pnpm , 听上去就像从 外面 招聘一个人来把 自己 给干掉
# 使用 npm 全局安装 pnpmnpminstall-gpnpm# 验证安装pnpm--version方法二：使用独立脚本安装
# 使用 curlcurl-fsSL https://get.pnpm.io/install.sh |sh - # 或使用 wgetwget -qO- https://get.pnpm.io/install.sh |sh - 配置 pnpm
最重要的就是配置 国内镜像源
因为在国内访问下载外国资源是很慢的, 推荐国内淘宝镜像 https://registry.npmmirror.com
# 查看 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 # 添加到 PATHecho'export PATH="$HOME/.pnpm-global:$PATH"'>> ~/.bashrc source ~/.bashrc pnpm setup source ~/.bashrc 5. 安装 Vue 开发环境
vue 是国内很流行的一款用于构建用户界面的 JavaScript 框架, 详细学习请参考 Vue 官方文档
安装 Vue CLI（传统方式）
# 使用 npm 安装 Vue CLInpminstall-g @vue/cli # 或使用 pnpmpnpmadd-g @vue/cli # 验证安装 vue --version使用 create-vue（Vue 官方推荐）
# 创建新的 Vue 项目npm create vue@latest # 或pnpm create vue@latest # 按照提示进行项目配置6. 用 vite 创建 Vue 项目示例
创建项目
# 创建一个新的 Vue 3 项目pnpm create vite@latest my-vue-app 
项目结构
. ├── 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 运行
# 进入项目目录cd my-vue-app # 安装依赖pnpminstall# 启动开发服务器pnpm dev 运行之后访问地址, 例如 http://localhost:5173/
7. 常用命令和工具
nvm 常用命令
# 列出已安装的 Node.js 版本 nvm list # 安装指定版本 nvm install18.17.0 # 使用指定版本 nvm use 18.17.0 # 设置默认版本 nvm alias default 18.17.0 # 在当前版本运行命令 nvm run 18.17.0 app.js pnpm 常用命令
# 安装依赖pnpminstallpnpmadd package-name # 添加到 dependenciespnpmadd-D package-name # 添加到 devDependenciespnpmadd-g package-name # 全局安装# 运行脚本pnpm run script-name pnpm dev # 开发模式pnpm build # 生产构建# 清理pnpm store prune # 清理 store# 升级包pnpm update pnpm update package-name Vue 相关命令
# 创建项目 vue create project-name npm create vue@latest pnpm create vue@latest # 项目内常用命令pnpm dev # 启动开发服务器pnpm build # 构建生产版本pnpm preview # 预览生产构建pnpmtest# 运行测试8. 配置优化
创建 ~/.npmrc（可选）
# 创建或编辑 ~/.npmrcnano ~/.npmrc # 添加以下内容（国内用户建议）registry=https://registry.npmmirror.com/ sass_binary_site=https://npmmirror.com/mirrors/node-sass/ electron_mirror=https://npmmirror.com/mirrors/electron/ 配置 shell 自动补全
# 为 pnpm 启用自动补全pnpm install-completion # 按照提示选择你的 shell (bash, zsh, fish)# 通常需要重启终端或重新加载配置source ~/.bashrc 9. 验证安装
创建一个测试脚本验证所有组件：
# 创建测试文件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 命令找不到
# 重新加载 shell 配置source ~/.bashrc source ~/.profile 权限问题
# 修复 npm 全局安装权限npm config set prefix ~/.npm-global echo'export PATH="$HOME/.npm-global/bin:$PATH"'>> ~/.bashrc source ~/.bashrc 清理缓存
# 清理 npm 缓存npm cache clean --force# 清理 pnpm 缓存pnpm store prune 