在适用于 Linux 的 Windows 子系统上安装 Vue.js

在适用于 Linux 的 Windows 子系统（WSL）上设置 Vue.js 开发环境的指南。 有关背景信息，请参阅 Vue.js 概述。

可以在 Windows 或 WSL 上直接 安装 Vue。 如果计划与 Node.js 后端交互、部署到 Linux 服务器或遵循使用 Bash 命令的教程，建议使用 WSL。

先决条件

• 安装适用于 Linux 的 Windows 子系统（WSL），包括 WSL 2 模式下运行的 Linux 分发版（如 Ubuntu）。 通过以下方式验证：wsl -l -v
• WSL 2上安装 Node.js：这包括版本管理器、包管理器、Visual Studio Code 和远程开发扩展。

重要

将项目文件存储在 WSL 文件系统（例如， ~/projects）中，而不是存储在装载的 Windows 驱动器上（/mnt/c/）。 跨文件系统边界工作会显著降低安装和生成时间。

创建 Vue 项目

启动新的 Vue 3 项目的推荐方法是使用 create-vue — 这是基于 Vite 的官方脚手架工具：

1. 打开 WSL 终端（例如 Ubuntu）。

2. 导航到项目目录：

   mkdir -p ~/projects
   cd ~/projects
   

3. 创建新的 Vue 项目：

   npm create vue@latest
   

   安装程序会提示你命名项目并选择可选功能（TypeScript、JSX 支持、Vue 路由器、Pinia 状态管理、Vitest、ESLint）。

4. 导航到项目文件夹、安装依赖项并启动开发服务器：

   cd <your-project-name>
   npm install
   npm run dev
   

   你的应用将在 http://localhost:5173 可用。

其他资源

• Vue 文档
• Vue.js 概述
• 在 Windows 上安装 Vue.js
• 使用 Vue.js学习路径执行第一步
• VS Code 的 Vue 教程