作为前端小白，刚接触 Vue 时最头疼的就是环境搭建和项目创建，而 Vue CLI 就是帮我们解决这个问题的 “神器”。
它是 Vue 官方提供的脚手架工具，不用手动配置 webpack、不用折腾环境，一行命令就能快速生成一个完整的 Vue 项目，真正做到开箱即用。
今天就用最通俗的语言，带大家从零掌握 Vue CLI，全程实操、无废话！
一、Vue CLI 是什么？
简单理解：Vue CLI = Vue 项目快速生成工具
它的作用：
- 一键创建 Vue 项目结构
- 自动配置开发环境
- 内置热更新（改代码浏览器自动刷新）
- 帮我们处理打包、编译、语法检查等复杂工作
一句话：有了 Vue CLI，你只需要专注写页面逻辑，其他都不用管。
二、安装 Vue CLI 前置条件
Vue CLI 依赖 Node.js，所以必须先安装 Node.js（LTS 版本即可）。
安装完成后，打开终端（cmd / 终端），检查是否安装成功：
node -v
npm -v
能显示版本号，就说明没问题。
三、安装 Vue CLI
打开管理员终端（Windows 建议管理员运行，避免权限报错），执行安装命令：
npm install -g @vue/cli
-g 表示全局安装，安装一次，电脑所有地方都能用
安装过程可能需要几十秒，耐心等待即可
安装完成后，检查版本：
vue --version
出现版本号，说明 Vue CLI 安装成功！
四、使用 Vue CLI 创建第一个 Vue 项目
1. 进入你想放项目的文件夹
# 示例：创建在桌面
cd Desktop
2. 执行创建命令
vue create vue-demo
vue-demo 是项目名，可以自己改
名称只能小写、不能有空格、不能有中文
3. 选择配置（新手必看）
创建时会让你选择：
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features
小白直接选第一个：Vue 3 默认配置，按回车，等待自动创建。
4. 进入项目
cd vue-demo
5. 启动项目
npm run serve
# 新版也可能是 npm run dev
启动成功后，浏览器访问：
http://localhost:8080
看到 Vue 欢迎页面，项目创建成功！
五、Vue CLI 创建的项目目录结构（小白必懂）
不用死记，知道核心目录就行：
vue-demo/
├── public/ # 静态资源（图片、图标，不参与编译）
├── src/ # 核心代码（99% 开发都在这里）
│ ├── assets/ # 图片、样式
│ ├── components/# 公共组件
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
└── package.json # 项目配置文件
src 是我们以后天天用的文件夹，记住它！
六、Vue CLI 常用命令总结
# 安装 Vue CLI
npm install -g @vue/cli
# 查看版本
vue --version
# 创建项目
vue create 项目名
# 进入项目
cd 项目名
# 启动项目
npm run serve
# 打包项目（上线用）
npm run build
七、小白常见问题（避坑指南）
- 安装时报权限错误：Windows 用管理员打开终端，Mac 前面加 sudo
- 命令报错：vue 不是内部命令：重新安装 Node.js，重启电脑
- 启动项目后浏览器打不开：检查终端是否报错，检查端口是否被占用
- 修改代码浏览器不刷新：确保项目正在运行（终端不能关）
八、总结
Vue CLI 是 Vue 开发最基础、最必备的工具，它让项目创建变得超级简单：安装 → 创建 → 启动 → 开发，四步搞定。
对于零基础小白来说：不用懂原理，先会用；先能创建项目、能跑起来，再慢慢学习语法。
这篇 Vue CLI 教程就到这里，跟着操作一遍，你绝对能学会！
