Vue基础教程（155）精通Vue CLI和Vite之安装脚手架：Vue装机指南｜CLI老司机 VS Vite闪电侠，三分钟让你从菜鸟秒变脚手架大神！

一、 前端萌新的灵魂拷问：为什么非要折腾脚手架？

还记得刚学前端时，我吭哧吭哧手动创建html、js、css三个文件的日子吗？当项目需要引入Vue库时，要么直接CDN引用，要么手动下载源码，要是再加个路由和状态管理，光整理依赖关系就能让人薅秃头发。直到某天看到大神敲了行命令就变出完整项目结构，才惊觉原来这就是“脚手架魔法”！

脚手架本质是个项目样板生成器，就像你玩《我的世界》时直接加载精美地图，不用从挖第一块泥土开始。具体来说，它帮你预置了：

• 📦 依赖管理（自动安装Vue全家桶）
• ⚙️ 构建配置（Webpack/Vite等打包工具）
• 🔧 开发服务器（带热更新的调试环境）
• 📁 标准目录结构（符合最佳实践）

现在主流的Vue脚手架有两派：Vue CLI（经典稳定派）和Vite（新锐速度派）。接下来就带你亲手解锁这两款神器！

---

二、 Vue CLI：老司机的稳妥之选

2.1 安装前的灵魂准备

首先需要安装Node.js（相当于给电脑装上前端开发的发动机）。建议选择LTS版本（长期支持版），就像选手机系统时选稳定版而非开发版。

打开终端输入以下代码检查装备：

node -v  # 查看Node版本号
npm -v   # 查看npm包管理器版本

如果显示版本号，恭喜！如果提示“不是内部命令”，请乖乖去Node官网下载安装包。

2.2 安装CLI的三种骚操作

方法一：官方推荐姿势

npm install -g @vue/cli

这行命令相当于给电脑全局安装了个叫“vue”的快捷指令。注意这里-g代表全局安装，就像在电脑里装了个随时能启动的软件。

方法二：用yarn加速（时尚玩家的选择）

yarn global add @vue/cli

如果你觉得npm太慢，可以先npm install -g yarn安装yarn，再用yarn安装cli。就像打车时普通车型和优享车型的区别。

方法三：用npx免安装（佛系玩家必备）

npx @vue/cli create my-project