Vue基础教程（9）搭建开发与调试环境之使用命令行工具（CLI）安装Vue.js：前端魔法师入门：手把手教你用Vue CLI三分钟变出酷炫交互页面！

一、 为什么你的前端开发需要个"脚手架"？

想象一下，你要盖个狗窝。新手会直接抡起锤子钉木板，结果大概率得到一座"比萨斜塔"同款建筑。而老手会先搭个脚手架——这就是Vue CLI对于前端开发的意义。

以前配置Vue项目有多痛苦？你得手动安装Webpack、Babel、ESLint...光版本兼容性就能逼疯一个程序员。我至今记得某个下午，因为一个Webpack配置报错，我喝了三杯咖啡后对着屏幕深情朗诵《大悲咒》。直到Vue CLI出现，它就像个贴心的管家，把你需要的工具都打包好，还附赠"一键生成"魔法。

Vue CLI（Command Line Interface）不是什么黑科技，它就是官方出品的项目脚手架工具。最新版基于Webpack 5和现代前端生态，但最神奇的是——你根本不需要懂这些底层配置！就像用美图秀秀不用懂像素级修图原理，用Vue CLI也能快速搭建专业级开发环境。

举个例子，隔壁工位的老王去年手动配置项目花了俩星期，今年用CLI三分钟搞定后，居然有时间在茶水间搞手冲咖啡了。这就是效率的降维打击！

二、 安装准备：给你的电脑"配装备"

2.1 必备神器Node.js

这就像手机没电需要充电器一样基础。打开nodejs官网，建议下载LTS（长期支持版），毕竟我们追求稳定不是来当测试员的。安装后打开终端输入：

node -v
npm -v

如果显示版本号，恭喜！如果报错...重启试试？90%的玄学问题靠重启解决（认真脸）。

2.2 选装但推荐的装备

• yarn：比npm更快的包管理工具，安装命令 npm install -g yarn
• nvm：Node版本管理器，方便切换不同项目需要的Node版本
• Vue Devtools：浏览器插件，堪称Vue应用的"X光机"，后面调试环节会惊艳到你

特别提醒：如果之前安装过旧版Vue CLI，请先 npm uninstall -g vue-cli 卸载，避免"新旧版本打架"。

三、 魔法时刻：用CLI快速生成项目

3.1 安装Vue CLI

打开终端（Windows用PowerStation/Mac用Terminal），输入：

npm install -g @vue/cli
# 或者用yarn
yarn global add @vue/cli

安装后输入 vue --version 验证。如果看到版本号，忍住不要欢呼太大声！

3.2 创建你的第一个Vue项目

找个舒适的目录，执行：

vue create my-vue-app

这时CLI会贴心地问你要不要"定制