Python
Ubuntu 搭建前端环境&Vue实战
文章目录 前言 1\. 系统更新和基础依赖 2\. 安装 nvm (Node Version Manager) 方法一：使用官方脚本安装（推荐） 方法二：手动安装 激活 nvm 3\. 使用 nvm 安装和管理 Node.js 4\. 安装 pnpm 方法一：使用 npm 安装（推荐） 方法二：使用独立脚本安装 配置 pnpm 5\. 安装 Vue 开发环境 安装 Vue CLI（传统方式） 使用…
文章目录 前言 1\. 系统更新和基础依赖 2\. 安装 nvm (Node Version Manager) 方法一：使用官方脚本安装（推荐） 方法二：手动安装 激活 nvm 3\. 使用 nvm 安装和管理 Node.js 4\. 安装 pnpm 方法一：使用 npm 安装（推荐） 方法二：使用独立脚本安装 配置 pnpm 5\. 安装 Vue 开发环境 安装 Vue CLI（传统方式） 使用…
本文讲述在 Ubuntu 上安装 nvm、pnpm 和 Vue 相关开发环境的完整配置。
# 更新系统包列表sudoapt update sudoapt upgrade -y# 安装常用工具sudoaptinstall-ycurlwgetgit build-essential
# 下载并运行安装脚本curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh |bash# 或使用 wgetwget -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 # 将以下内容添加到 ~/.bashrcecho'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 版本（推荐） 这里是 v24.12.0 nvm install--lts# 查看 nvm ls
nvm 常用命令
# 查看可安装的 Node.js 版本 nvm ls-remote # 安装最新的 LTS 版本（推荐） 这里是 v24.12.0 nvm install--lts# 安装特定版本 nvm install18# Node.js 18.x nvm install20# Node.js 20.x# 查看已安装的版本 nvm ls# 切换使用特定版本 nvm use 18# 设置默认版本 nvm alias default 18# 验证 Node.js 和 npm 安装node--versionnpm--version# 卸载指定版本 nvm uninstall 18# Node.js 18.x nvm uninstall 20# Node.js 20.x
个人习惯用 pnpm 替代 npm 包管理器, pnpm 相比 npm 的主要优势在于磁盘空间效率、安装速度、依赖管理和安全性。以下是详细对比：
| 特性 | pnpm | npm |
|---|---|---|
| 磁盘存储 | ⭐ 全局存储 + 硬链接，相同包只存一份 | ❌ 每个项目都复制完整的依赖包 |
| 安装速度 | ⭐ 首次安装快（缓存机制） | ⚡ 较慢（需下载解压） |
| 依赖结构 | ⭐ 严格扁平化，防止幽灵依赖 | ❌ 扁平化导致依赖混乱 |
| Monorepo 支持 | ⭐ 内置、高效 | ⚡ 需 Lerna/TurboRepo 等工具 |
| 安全性 | ⭐ 默认锁定版本，防止意外依赖提升 | ⚡ 可能有依赖劫持风险 |
node 默认自带有 npm , 可以用 npm 安装 pnpm , 听上去就像从 外面 招聘一个人来把 自己 给干掉
# 使用 npm 全局安装 pnpmnpminstall-gpnpm# 验证安装pnpm--version
# 使用 curlcurl-fsSL https://get.pnpm.io/install.sh |sh - # 或使用 wgetwget -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 # 添加到 PATHecho'export PATH="$HOME/.pnpm-global:$PATH"'>> ~/.bashrc source ~/.bashrc pnpm setup source ~/.bashrc
vue 是国内很流行的一款用于构建用户界面的 JavaScript 框架, 详细学习请参考 Vue 官方文档
# 使用 npm 安装 Vue CLInpminstall-g @vue/cli # 或使用 pnpmpnpmadd-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 # 安装依赖pnpminstall# 启动开发服务器pnpm dev
运行之后访问地址, 例如 http://localhost:5173/
# 列出已安装的 Node.js 版本 nvm list # 安装指定版本 nvm install18.17.0 # 使用指定版本 nvm use 18.17.0 # 设置默认版本 nvm alias default 18.17.0 # 在当前版本运行命令 nvm run 18.17.0 app.js
# 安装依赖pnpminstallpnpmadd package-name # 添加到 dependenciespnpmadd-D package-name # 添加到 devDependenciespnpmadd-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 # 预览生产构建pnpmtest# 运行测试
# 创建或编辑 ~/.npmrcnano ~/.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
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online