跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScriptNode.js大前端

Ubuntu 前端开发环境搭建与 Vue 实战

在 Ubuntu 系统上搭建前端开发环境的完整流程。内容包括系统更新、安装 nvm 管理 Node.js 版本、使用 pnpm 替代 npm 进行包管理、以及通过 Vite 创建 Vue 项目。此外还涵盖了常用命令、配置优化及故障排除方法，帮助开发者快速构建高效的 Vue 开发环境。

Pythonist发布于 2026/4/5更新于 2026/9/465 浏览
Ubuntu 前端开发环境搭建与 Vue 实战

Ubuntu 前端开发环境搭建与 Vue 实战

前言

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

1. 系统更新和基础依赖

# 更新系统包列表
sudo apt update
sudo apt upgrade -y
# 安装常用工具
sudo apt install -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 克隆 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 配置
source ~/.bashrc
# 验证安装
nvm --version
# 查看可安装的 Node.js 版本
nvm ls-remote
# 安装最新的 LTS 版本（推荐）
nvm install --lts
# 查看 nvm ls

安装截图

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

nvm 常用命令

# 查看可安装的 Node.js 版本
nvm ls-remote
# 安装最新的 LTS 版本（推荐）
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
nvm uninstall 20

4. 安装 pnpm

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

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

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

node 默认自带有 npm，可以用 npm 安装 pnpm。

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

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

# 使用 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。

# 查看 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（传统方式）

# 使用 npm 安装 Vue CLI
npm install -g @vue/cli
# 或使用 pnpm
pnpm add -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
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev

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

运行截图

7. 常用命令和工具

nvm 常用命令

# 列出已安装的 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 常用命令

# 安装依赖
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 相关命令

# 创建项目
vue create project-name
npm create vue@latest
pnpm create vue@latest
# 项目内常用命令
pnpm dev # 启动开发服务器
pnpm build # 构建生产版本
pnpm preview # 预览生产构建
pnpm test # 运行测试

8. 配置优化

创建 ~/.npmrc（可选）

# 创建或编辑 ~/.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 自动补全

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

目录

  1. Ubuntu 前端开发环境搭建与 Vue 实战
  2. 前言
  3. 1. 系统更新和基础依赖
  4. 更新系统包列表
  5. 安装常用工具
  6. 2. 安装 nvm (Node Version Manager)
  7. 方法一：使用官方脚本安装（推荐）
  8. 下载并运行安装脚本
  9. 或使用 wget
  10. 方法二：手动安装
  11. 从 GitHub 克隆 nvm 仓库
  12. 将以下内容添加到 ~/.bashrc
  13. 激活 nvm
  14. 重新加载 bash 配置
  15. 验证安装
  16. 查看可安装的 Node.js 版本
  17. 安装最新的 LTS 版本（推荐）
  18. 查看 nvm ls
  19. 3. 使用 nvm 安装和管理 Node.js
  20. 查看可安装的 Node.js 版本
  21. 安装最新的 LTS 版本（推荐）
  22. 安装特定版本
  23. 查看已安装的版本
  24. 切换使用特定版本
  25. 设置默认版本
  26. 验证 Node.js 和 npm 安装
  27. 卸载指定版本
  28. 4. 安装 pnpm
  29. 方法一：使用 npm 安装（推荐）
  30. 使用 npm 全局安装 pnpm
  31. 验证安装
  32. 方法二：使用独立脚本安装
  33. 使用 curl
  34. 或使用 wget
  35. 配置 pnpm
  36. 查看 pnpm 配置
  37. 设置淘宝镜像（可选，国内用户推荐）
  38. 设置全局安装目录
  39. 添加到 PATH
  40. 5. 安装 Vue 开发环境
  41. 安装 Vue CLI（传统方式）
  42. 使用 npm 安装 Vue CLI
  43. 或使用 pnpm
  44. 验证安装
  45. 使用 create-vue（Vue 官方推荐）
  46. 创建新的 Vue 项目
  47. 或
  48. 按照提示进行项目配置
  49. 6. 用 vite 创建 Vue 项目示例
  50. 创建项目
  51. 创建一个新的 Vue 3 项目
  52. 项目结构
  53. 运行
  54. 进入项目目录
  55. 安装依赖
  56. 启动开发服务器
  57. 7. 常用命令和工具
  58. nvm 常用命令
  59. 列出已安装的 Node.js 版本
  60. 安装指定版本
  61. 使用指定版本
  62. 设置默认版本
  63. 在当前版本运行命令
  64. pnpm 常用命令
  65. 安装依赖
  66. 运行脚本
  67. 清理
  68. 升级包
  69. Vue 相关命令
  70. 创建项目
  71. 项目内常用命令
  72. 8. 配置优化
  73. 创建 ~/.npmrc（可选）
  74. 创建或编辑 ~/.npmrc
  75. 添加以下内容（国内用户建议）
  76. 配置 shell 自动补全
  77. 为 pnpm 启用自动补全
  78. 按照提示选择你的 shell (bash, zsh, fish)
  79. 通常需要重启终端或重新加载配置
  80. 9. 验证安装
  81. 创建测试文件
  82. 运行测试
  83. 10. 故障排除
  84. nvm 命令找不到
  85. 重新加载 shell 配置
  86. 权限问题
  87. 修复 npm 全局安装权限
  88. 清理缓存
  89. 清理 npm 缓存
  90. 清理 pnpm 缓存

更多推荐文章

查看全部
  • Ubuntu 部署 Ghost 1.0 博客系统实战
  • 归并排序非递归实现详解
  • OpenClaw ACP 协议深度解析：IDE 直接驱动 AI Agent
  • 前端三剑客基础与 Web 安全入门
  • Claude Code CLI 安装与路由配置指南 (Linux/Windows/macOS)
  • MySQL InnoDB MVCC 多版本并发控制实现原理
  • Qwen3 + Qwen Agent 智能体开发实战：接入 MCP 工具
  • WebPShop 插件：Photoshop 处理 WebP 格式的完整指南
  • 2023 年 8 月编程语言排行榜：Python 第一，C++ 升至第三
  • 零基础入门自主机器人：开源教材《Introduction to Autonomous Robots》详解
  • 从零手写 ResNet50：AI 视觉算法原理与性能优化实战
  • 基于 STM32 的智能家居环境监测与控制系统设计
  • Ubuntu 26.04 LTS 新特性前瞻：坚毅浣熊发布计划与核心更新
  • Python 函数应用实战与最佳实践
  • Web技术核心与安全风险（三）Web 后端安全
  • Ubuntu 24.04 安装 OpenClaw 时 systemctl is-enabled 报错解决
  • Qwen3-Embedding-4B 与 llama.cpp 部署实战
  • MBA 论文降 AIGC 率：几个实用工具的真实体验
  • DeepSeek-R1-Distill-Llama-8B 数学解题应用案例
  • OpenClaw Secure DM Pairing：AI 机器人安全私信访问机制

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online