Ubuntu搭建前端環(huán)境完整步驟及Vue實(shí)戰(zhàn)記錄

更新時(shí)間：2026年04月13日 09:37:08 作者：鉛筆俠愛(ài)小龍蝦

在當(dāng)今的Web開(kāi)發(fā)中,前端項(xiàng)目的重要性日益凸顯,Vue.js作為一個(gè)流行的前端框架,憑借其組件化和數(shù)據(jù)驅(qū)動(dòng)的特性,成為眾多開(kāi)發(fā)者的首選,這篇文章主要介紹了Ubuntu搭建前端環(huán)境完整步驟及Vue實(shí)戰(zhàn)的相關(guān)資料,需要的朋友可以參考下

前言

本文講述在 Ubuntu 上安裝 nvm、pnpm 和 Vue 相關(guān)開(kāi)發(fā)環(huán)境的完整配置。

1. 系統(tǒng)更新和基礎(chǔ)依賴

# 更新系統(tǒng)包列表
sudo apt update
sudo apt upgrade -y
# 安裝常用工具
sudo apt install -y curl wget git build-essential

2. 安裝 nvm (Node Version Manager)

方法一：使用官方腳本安裝（推薦）

# 下載并運(yùn)行安裝腳本
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

方法二：手動(dòng)安裝

# 從 GitHub 克隆 nvm 倉(cāng)庫(kù)
git clone https://github.com/nvm-sh/nvm.git ~/.nvm
cd ~/.nvm
git checkout v0.39.0
# 將以下內(nèi)容添加到 ~/.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
# 驗(yàn)證安裝
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 install 18  # Node.js 18.x
nvm install 20  # Node.js 20.x
# 查看已安裝的版本
nvm ls
# 切換使用特定版本
nvm use 18
# 設(shè)置默認(rèn)版本
nvm alias default 18
# 驗(yàn)證 Node.js 和 npm 安裝
node --version
npm --version
# 卸載指定版本
nvm uninstall 18  # Node.js 18.x
nvm uninstall 20  # Node.js 20.x

4. 安裝 pnpm

個(gè)人習(xí)慣用 pnpm 替代 npm 包管理器, pnpm 相比 npm 的主要優(yōu)勢(shì)在于磁盤空間效率、安裝速度、依賴管理和安全性。以下是詳細(xì)對(duì)比：

特性	pnpm	npm
磁盤存儲(chǔ)	? 全局存儲(chǔ) + 硬鏈接，相同包只存一份	? 每個(gè)項(xiàng)目都復(fù)制完整的依賴包
安裝速度	? 首次安裝快（緩存機(jī)制）	? 較慢（需下載解壓）
依賴結(jié)構(gòu)	? 嚴(yán)格扁平化，防止幽靈依賴	? 扁平化導(dǎo)致依賴混亂
Monorepo 支持	? 內(nèi)置、高效	? 需 Lerna/TurboRepo 等工具
安全性	? 默認(rèn)鎖定版本，防止意外依賴提升	? 可能有依賴劫持風(fēng)險(xiǎn)

方法一：使用 npm 安裝（推薦）

node 默認(rèn)自帶有 npm , 可以用 npm 安裝 pnpm , 聽(tīng)上去就像從 外面 招聘一個(gè)人來(lái)把 自己 給干掉

# 使用 npm 全局安裝 pnpm
npm install -g pnpm
# 驗(yàn)證安裝
pnpm --version

方法二：使用獨(dú)立腳本安裝

# 使用 curl
curl -fsSL https://get.pnpm.io/install.sh | sh -
# 或使用 wget
wget -qO- https://get.pnpm.io/install.sh | sh -

配置 pnpm

最重要的就是配置國(guó)內(nèi)鏡像源

因?yàn)樵趪?guó)內(nèi)訪問(wèn)下載外國(guó)資源是很慢的, 推薦國(guó)內(nèi)淘寶鏡像 https://registry.npmmirror.com

# 查看 pnpm 配置
pnpm config list
# 設(shè)置淘寶鏡像（可選，國(guó)內(nèi)用戶推薦）
pnpm config set registry https://registry.npmmirror.com
# 設(shè)置全局安裝目錄
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 開(kāi)發(fā)環(huán)境

vue 是國(guó)內(nèi)很流行的一款用于構(gòu)建用戶界面的 JavaScript 框架, 詳細(xì)學(xué)習(xí)請(qǐng)參考 Vue 官方文檔

安裝 Vue CLI（傳統(tǒng)方式）

# 使用 npm 安裝 Vue CLI
npm install -g @vue/cli
# 或使用 pnpm
pnpm add -g @vue/cli
# 驗(yàn)證安裝
vue --version

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

# 創(chuàng)建新的 Vue 項(xiàng)目
npm create vue@latest
# 或
pnpm create vue@latest
# 按照提示進(jìn)行項(xiàng)目配置

6. 用 vite 創(chuàng)建 Vue 項(xiàng)目示例

創(chuàng)建項(xiàng)目

# 創(chuàng)建一個(gè)新的 Vue 3 項(xiàng)目
pnpm create vite@latest my-vue-app

項(xiàng)目結(jié)構(gòu)

.
├── 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

運(yùn)行

# 進(jìn)入項(xiàng)目目錄
cd my-vue-app
# 安裝依賴
pnpm install
# 啟動(dòng)開(kāi)發(fā)服務(wù)器
pnpm dev

運(yùn)行之后訪問(wèn)地址, 例如 http://localhost:5173/

7. 常用命令和工具

nvm 常用命令

# 列出已安裝的 Node.js 版本
nvm list
# 安裝指定版本
nvm install 18.17.0
# 使用指定版本
nvm use 18.17.0
# 設(shè)置默認(rèn)版本
nvm alias default 18.17.0
# 在當(dāng)前版本運(yùn)行命令
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       # 全局安裝
# 運(yùn)行腳本
pnpm run script-name
pnpm dev                       # 開(kāi)發(fā)模式
pnpm build                     # 生產(chǎn)構(gòu)建
# 清理
pnpm store prune               # 清理 store
# 升級(jí)包
pnpm update
pnpm update package-name

Vue 相關(guān)命令

# 創(chuàng)建項(xiàng)目
vue create project-name
npm create vue@latest
pnpm create vue@latest
# 項(xiàng)目?jī)?nèi)常用命令
pnpm dev        # 啟動(dòng)開(kāi)發(fā)服務(wù)器
pnpm build      # 構(gòu)建生產(chǎn)版本
pnpm preview    # 預(yù)覽生產(chǎn)構(gòu)建
pnpm test       # 運(yùn)行測(cè)試

8. 配置優(yōu)化

創(chuàng)建 ~/.npmrc（可選）

# 創(chuàng)建或編輯 ~/.npmrc
nano ~/.npmrc
# 添加以下內(nèi)容（國(guó)內(nèi)用戶建議）
registry=https://registry.npmmirror.com/
sass_binary_site=https://npmmirror.com/mirrors/node-sass/
electron_mirror=https://npmmirror.com/mirrors/electron/

配置 shell 自動(dòng)補(bǔ)全

# 為 pnpm 啟用自動(dòng)補(bǔ)全
pnpm install-completion
# 按照提示選擇你的 shell (bash, zsh, fish)
# 通常需要重啟終端或重新加載配置
source ~/.bashrc

9. 驗(yàn)證安裝

創(chuàng)建一個(gè)測(cè)試腳本驗(yàn)證所有組件：

# 創(chuàng)建測(cè)試文件
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
# 運(yùn)行測(cè)試
node test-env.js

10. 故障排除

nvm 命令找不到

# 重新加載 shell 配置
source ~/.bashrc
source ~/.profile

權(quán)限問(wèn)題

# 修復(fù) npm 全局安裝權(quán)限
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

總結(jié)

到此這篇關(guān)于Ubuntu搭建前端環(huán)境完整步驟及Vue實(shí)戰(zhàn)記錄的文章就介紹到這了,更多相關(guān)Ubuntu搭建前端環(huán)境Vue實(shí)戰(zhàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: