在适用于 Linux 的 Windows 子系统上安装 Vue.js
本指南帮助你在 Windows 上设置 Vue.js 开发环境,方法是在适用于 Linux 的 Windows 子系统 (WSL) 上安装 Vue.js Web 框架。 有关详细信息,请参阅 Vue.js 概述页。
Vue 可以直接安装在 Windows 或 WSL 上。 如果你计划与 NodeJS 后端交互,想要与 Linux 生产服务器等效,或者打算遵循使用 Bash 命令的教程,我们通常建议在 WSL 上安装。 你可能还希望将 Vite 视为 Vue.js 的替代方法。
先决条件
- 安装适用于 Linux 的 Windows 子系统 (WSL),其中包括一个 Linux 分发版(如 Ubuntu),并确保其在 WSL 2 模式下运行。 可通过打开 PowerShell 并输入以下内容进行检查:
wsl -l -v
- 在 WSL 2 上安装 Node.js:这包括版本管理器、包管理器、Visual Studio Code 和远程开发扩展。 使用 Node 包管理器 (npm) 安装 Vue.js。
重要
使用 WSL 安装 Linux 分发版将创建一个存储文件的目录:\\wsl\Ubuntu-20.04
(将 Ubuntu 20.04 替换为你要使用的任何 Linux 分发版)。 要在 Windows 文件资源管理器中打开此目录,请打开 WSL 命令行,使用 cd ~
选择主目录,然后输入命令 explorer.exe .
注意不要在装载的 C 驱动器 (/mnt/c/Users/yourname$
) 上安装或存储要处理的文件。 这样会显著延长安装和生成的时间。
安装 Vue.js
在 WSL 上安装 Vue.js:
打开 WSL 命令行(如 Ubuntu)。
创建新项目文件夹
mkdir VueProjects
并输入以下目录:cd VueProjects
。使用 Node 包管理器 (npm) 安装 Vue.js:
npm install vue
使用命令 vue --version
检查已安装的版本号。
注意
要使用 CDN 而不是 NPM 安装 Vue.js,请参阅 Vue.js 安装文档。
安装 Vue CLI
Vue CLI 是用于在终端/命令行中使用 Vue 的工具包。 通过 Vue CLI,你可以快速创建新项目的基架 (vue create),提供新想法的原型 (vue serve),或使用图形用户界面管理项目 (vue ui)。 Vue CLI 是一个全局安装的 npm 包,为你处理一些复杂的生成问题(如使用 Babel 或 Webpack)。 如果不打算生成新的单页应用,则可能不需要 Vue CLI。
要安装 Vue CLI,请使用 npm。 为了升级 (vue upgrade --next
),必须使用 -g
标志进行全局安装:
npm install -g @vue/cli
有关可添加的其他插件的详细信息(如用于集成 GraphQL 的 Linting 或 Apollo),请访问 Vue CLI 文档中的 Vue CLI 插件。
其他资源
- Vue 文档
- Vue.js 概述
- 在 Windows 上安装 Vue.js
- 安装 Nuxt.js
- Microsoft Learn 在线课程:开始使用 Vue.js
- 试用 VS Code 的 Vue 教程