JavaScriptNode.js大前端
Ubuntu 搭建前端环境及 Vue 实战
介绍在 Ubuntu 系统上搭建前端开发环境的完整流程，包括更新系统、安装 nvm 管理 Node.js 版本、使用 pnpm 作为包管理器以及配置 Vue 开发环境（Vue CLI 或 Vite）。内容涵盖常用命令、镜像源配置、项目创建示例及故障排除方法，帮助开发者快速完成环境初始化。
介绍在 Ubuntu 系统上搭建前端开发环境的完整流程，包括更新系统、安装 nvm 管理 Node.js 版本、使用 pnpm 作为包管理器以及配置 Vue 开发环境（Vue CLI 或 Vite）。内容涵盖常用命令、镜像源配置、项目创建示例及故障排除方法，帮助开发者快速完成环境初始化。
本文讲述在 Ubuntu 上安装 nvm、pnpm 和 Vue 相关开发环境的完整配置。
# 更新系统包列表
sudo apt update
sudo apt upgrade -y
# 安装常用工具
sudo apt install -y curl wget git build-essential
# 下载并运行安装脚本
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
# 重新加载 bash 配置
source ~/.bashrc
# 验证安装
nvm --version
# 查看可安装的 Node.js 版本
nvm ls-remote
# 安装最新的 LTS 版本（推荐）
nvm install --lts
# 查看已安装版本
nvm ls
# 查看可安装的 Node.js 版本
nvm ls-remote
# 安装最新的 LTS 版本（推荐）
nvm install --lts
# 安装特定版本
nvm install 18
nvm install 20
# 查看已安装的版本
nvm ls
# 切换使用特定版本
nvm use 18
# 设置默认版本
nvm alias default 18
# 验证 Node.js 和 npm 安装
node --version
npm --version
# 卸载指定版本
nvm uninstall 18
nvm uninstall 20
pnpm 相比 npm 的主要优势在于磁盘空间效率、安装速度、依赖管理和安全性。
| 特性 | pnpm | npm |
|---|---|---|
| 磁盘存储 | 全局存储 + 硬链接，相同包只存一份 | 每个项目都复制完整的依赖包 |
| 安装速度 | 首次安装快（缓存机制） | 较慢（需下载解压） |
| 依赖结构 | 严格扁平化，防止幽灵依赖 | 扁平化导致依赖混乱 |
| Monorepo 支持 | 内置、高效 | 需 Lerna/TurboRepo 等工具 |
| 安全性 | 默认锁定版本，防止意外依赖提升 | 可能有依赖劫持风险 |
# 使用 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 -
国内用户建议使用淘宝镜像 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
Vue 是流行的前端框架，详细学习请参考 Vue 官方文档。
# 使用 npm 安装 Vue CLI
npm install -g @vue/cli
# 或使用 pnpm
pnpm add -g @vue/cli
# 验证安装
vue --version
# 创建新的 Vue 项目
npm create vue@latest
# 或
pnpm create vue@latest
# 按照提示进行项目配置
# 创建一个新的 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/。
# 列出已安装的 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 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 create project-name
npm create vue@latest
pnpm create vue@latest
# 项目内常用命令
pnpm dev # 启动开发服务器
pnpm build # 构建生产版本
pnpm preview # 预览生产构建
pnpm test # 运行测试
# 创建或编辑 ~/.npmrc
nano ~/.npmrc
# 添加以下内容（国内用户建议）
registry=https://registry.npmmirror.com/
sass_binary_site=https://npmmirror.com/mirrors/node-sass/
electron_mirror=https://npmmirror.com/mirrors/electron/
# 为 pnpm 启用自动补全
pnpm install-completion
# 按照提示选择你的 shell (bash, zsh, fish)
# 通常需要重启终端或重新加载配置
source ~/.bashrc
创建一个测试脚本验证所有组件：
# 创建测试文件
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
# 重新加载 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
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online