安装 Vue CLI
安装并使用 Vue CLI 创建新项目
安装 Vue CLI 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 1 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。
什么是 Vue CLI
Vue CLI 是用于搭建和管理 Vue 项目的经典命令行工具。
- 使用合理的默认设置创建项目
- 通过插件管理构建配置
- 基于 webpack 构建
多年来它一直是标准工具，不过现代 Vue 现在更倾向于使用 Vite。
全局安装 Vue CLI
请全局安装 CLI，这样您就可以在任何位置使用 vue 命令。
# Install globally with npm
npm install -g @vue/cli
# Verify the installation
vue --version
# @vue/cli 5.0.8创建项目
使用 vue create 搭建新项目。您需要为项目提供一个名称。
# Create a new project
vue create my-project
# The CLI launches an interactive prompt选择预设
CLI 会要求您选择一个预设：
- 默认提供 Babel 和 ESLint，是快捷方式
- 手动选择功能允许您添加 Router、Vuex、TypeScript、测试等功能
您可以保存预设，并在将来创建项目时重复使用。
手动选择功能
选择手动配置时，您可以切换想要使用的功能。
# Example feature checklist
? Check the features needed for your project:
(*) Babel
( ) TypeScript
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter运行项目
创建完成后，CLI 会打印启动应用所需的命令。
# Move into the project
cd my-project
# Start the dev server
npm run serve
# App runs at http://localhost:8080Vite 登场
Vite 是 Vue 团队创建的现代构建工具。
- 使用原生 ES 模块，实现即时启动
- 提供快如闪电的热模块替换
- 比基于 webpack 的 Vue CLI 快得多
现在，Vite 是新 Vue 项目推荐使用的工具。
Vite 与 Vue CLI
下面比较这两个工具：
- Vue CLI 使用 webpack，冷启动较慢，但成熟且可配置
- Vite 使用 esbuild 和原生 ESM，几乎即时启动，是未来的默认选择
Vue CLI 现在处于维护模式。除非您维护的是旧项目，否则请优先使用 Vite。
npm create vue@latest
启动新的 Vite 驱动 Vue 项目的官方方式，是使用 create-vue 工具。
# Scaffold a Vite + Vue project
npm create vue@latest
# Prompts for name and features:
# TypeScript, JSX, Vue Router, Pinia,
# Vitest, ESLint, Prettier运行 create-vue 项目
create-vue 使用标准的 Vite 脚本。
# After scaffolding
cd my-vue-app
npm install
npm run dev
# Dev server: http://localhost:5173应该选择哪一个
选择建议如下：
- 在 2024 年或之后从头开始？请使用 npm create vue@latest（Vite）
- 正在维护使用 Vue CLI 构建的旧项目？请继续使用 Vue CLI
- 想要最快的开发体验？Vite 更胜一筹
快速检查
测试您对 Vue 工具选择的理解。
回顾：Vue CLI 安装
您了解了 Vue 项目的搭建工具：
- Vue CLI 使用 npm install -g @vue/cli 安装
- vue create 使用预设搭建项目
- Vite 是现代且快速的替代方案
- npm create vue@latest 是推荐的现代化起点
接下来：探索生成的项目结构。
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 42
- 课程
- 156
常见问题解答
「安装 Vue CLI」课时是免费的吗？
是的 — 「安装 Vue CLI」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。
「安装 Vue CLI」这节课中我会学到什么？
安装并使用 Vue CLI 创建新项目 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 3 节。
「安装 Vue CLI」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。