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

4. 安装 pnpm

pnpm 相比 npm 在磁盘空间效率、安装速度和依赖结构上有明显优势。它通过硬链接机制避免重复存储依赖包，特别适合 Monorepo 场景。

方法一：使用 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

国内用户建议配置镜像源以提升下载速度。

# 查看 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

5. 安装 Vue 开发环境

Vue 是构建用户界面的主流 JavaScript 框架。目前主要有两种初始化方式。

安装 Vue CLI（传统方式）

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

# 验证安装
vue --version

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

基于 Vite 的新项目创建工具，更轻量且现代。

# 创建新的 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
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（可选）

配置全局镜像源可以加速所有 npm/pnpm 包的下载。

# 创建或编辑 ~/.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 命令找不到

通常是因为环境变量未生效，尝试重新加载配置。

source ~/.bashrc
source ~/.profile

权限问题

如果遇到 npm 全局安装权限错误，可修改 prefix 配置。

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