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

4. 安装 pnpm

相比 npm，pnpm 在磁盘空间利用和安装速度上表现更优，尤其适合大型项目。它采用硬链接机制，相同依赖只存储一份，且严格扁平化依赖结构，避免幽灵依赖问题。

安装方式

方法一：通过 npm 全局安装（推荐）

npm install -g pnpm
pnpm --version

方法二：独立脚本安装

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

配置镜像源

国内用户建议配置淘宝镜像以提升下载速度：

# 设置 registry
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

5. 安装 Vue 开发环境

Vue 是目前最流行的前端框架之一。我们提供两种初始化方式。

Vue CLI（传统方式）

npm install -g @vue/cli
# 或
pnpm add -g @vue/cli
vue --version

create-vue（官方推荐）

npm create vue@latest
# 或
pnpm create vue@latest

按提示完成项目配置即可。

6. 用 Vite 创建 Vue 项目示例

Vite 提供了更快的冷启动和热更新体验。

创建项目

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 命令

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      # 清理缓存

Vue 命令

vue create project-name
pnpm create vue@latest
pnpm dev              # 启动服务
pnpm build            # 构建
pnpm preview          # 预览
pnpm test             # 测试

8. 配置优化

设置 npm 镜像

编辑 ~/.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 cache clean --force
pnpm store prune