​​【前端开发】Vue CLI 命令及速查表

​​Vue CLI 的命令看似繁多，其实核心逻辑非常清晰。要更好地记忆这些命令，关键在于理解‌“生命周期”‌（从创建到销毁）和‌“动词含义”‌。

以下是 Vue CLI 常用命令的深度解析与记忆技巧：

一、 核心命令解析

1. 安装与环境准备

npm install -g @vue/cli‌

含义‌：全局安装 Vue 脚手架工具。
记忆点‌：-g 代表 Global（全局），只需装一次，以后在任何目录都能用 vue 命令。
注意‌：如果是旧版本升级，需先卸载 npm uninstall -g vue-cli。

vue --version‌ (或 vue -V)

含义‌：查看当前安装的 Vue CLI 版本。
记忆点‌：Version（版本）。这是验证安装是否成功的第一步。
2. 项目创建（起步）

vue create ‌

含义‌：创建一个全新的 Vue 项目。
记忆点‌：‌Create‌（创造/新建）。这是你开始一个新项目时的第一个动作。
交互‌：运行后会出现交互式菜单，让你选择预设（Default）或手动配置特性（Manually select features如 Router, Vuex, TypeScript等）。

vue ui‌

含义‌：启动图形化界面管理工具。
记忆点‌：‌UI‌（用户界面）。如果你不喜欢敲命令，可以用这个可视化的方式创建和管理项目（默认端口 8000）。
3. 开发与运行（日常最高频）

进入项目目录后（cd ），以下命令在 package.json 的 scripts 中定义，通常通过 npm/yarn 运行：

npm run serve‌ (或 yarn serve)

含义‌：启动本地开发服务器。
记忆点‌：‌Serve‌（服务/招待）。想象你在“招待”浏览器，让它能看到你的页面。它支持‌热更新‌（Hot Reload），代码保存后页面自动刷新。
默认地址‌：通常是 http://localhost:8080。

npm run build‌ (或 yarn build)

含义‌：将项目打包成生产环境可用的静态文件。
记忆点‌：‌Build‌（构建/建造）。就像把散乱的砖块（源码）建成一座房子（dist 文件夹），准备上线。
结果‌：生成 dist 目录，包含压缩后的 HTML/CSS/JS。

npm run lint‌ (或 yarn lint)

含义‌：检查代码格式和规范。
记忆点‌：‌Lint‌（梳理/挑刺）。像梳子一样梳理代码，找出不符合规范的地方（如分号缺失、缩进错误）。
4. 插件管理（扩展功能）
vue add ‌
含义‌：向现有项目中添加官方插件（如 router, vuex, eslint 等）。
记忆点‌：‌Add‌（添加）。比如 vue add router 会自动安装依赖并配置好路由文件，比手动 npm install 更智能。
二、 如何更好记忆？（三大法则）
法则 1：动词联想记忆法

将命令映射为简单的英文动词，形成肌肉记忆：

法则 2：生命周期流程图记忆

不要死记硬背，而是按照做项目的自然流程来记：

安装工具‌：npm i -g @vue/cli （一次性工作）
创建项目‌：vue create my-app （一次性工作）
进入目录‌：cd my-app （每次都要做）
开始干活‌：npm run serve （每天开发时都在用）
完工上线‌：npm run build （项目结束时用）
法则 3：区分 vue 命令与 npm run 命令

很多初学者容易混淆什么时候用 vue xxx，什么时候用 npm run xxx。

vue …‌：是‌脚手架本身‌提供的命令。
用于‌项目外‌的操作：创建新项目 (create)、启动 UI (ui)、添加插件 (add)。
例外：vue serve 和 vue build 可用于快速原型开发（单个 .vue 文件），但常规项目中很少用。
npm run …‌：是‌项目内部‌定义的脚本。
用于‌项目内‌的操作：启动开发服务器 (serve)、打包 (build)、测试 (test)、检查 (lint)。
原理：这些命令实际指向的是局部安装的 @vue/cli-service。
三、 常见误区与提示

Vue CLI 已处于维护模式‌：

如果你是‌新项目‌，官方强烈建议使用 ‌Vite‌ 而非 Vue CLI。
Vite 的命令更简单：npm create vue@latest 创建项目，npm run dev 启动，npm run build 打包。
记忆转换：如果把 Vue CLI 比作“重型卡车”，Vite 就是“轻型跑车”。现在趋势是转向 Vite。

serve vs start‌：

在 Vue CLI 生成的项目中，启动命令默认是 serve。
在其他框架（如 React Create App）或 Vite 中，启动命令可能是 start 或 dev。
技巧：不确定时，打开项目根目录下的 package.json 文件，查看 “scripts” 字段，里面定义了所有可用的命令。

端口占用‌：

如果 npm run serve 报错说端口 8080 被占用，它通常会自动尝试 8081。你也可以在 vue.config.js 中配置固定端口。
总结速查表
bash

1. 安装脚手架 (全局，只做一次)

npm install -g @vue/cli

2. 验证安装

vue --version

3. 创建新项目

vue create my-project

4. 进入项目

cd my-project

5. 开发模式 (最常用)

npm run serve

6. 生产打包

npm run build

7. 代码检查

npm run lint

8. 添加插件 (如路由)

vue add router

掌握这 8 个步骤，你就覆盖了 Vue CLI 90% 的使用场景。记住 ‌“Create -> Serve -> Build”‌ 这条主线，其他命令都是辅助。

覆盖全流程的Vue CLI常用命令速查表,方便快速查阅记忆的需求，所有命令均基于主流版本规范整理。

一、全局环境类命令
表格
命令 功能说明 补充提示
npm install -g @vue/cli 全局安装最新版Vue CLI 需先卸载旧版vue-cli避免冲突
npm install -g @vue/cli@x.x.x 安装指定版本的Vue CLI 替换x.x.x为目标版本号即可
vue --version / vue -V 查看当前Vue CLI版本 验证安装是否成功的核心指令
npm update -g @vue/cli 全局升级Vue CLI到最新版 适配Node.js 8.9+及以上环境
npm uninstall -g vue-cli 卸载旧版Vue CLI 1.x/2.x 安装新版前必须执行的清理操作
二、项目创建与管理类命令

三、项目内部运行类命令

需先进入项目根目录执行

四、辅助查询类命令
表格
命令 功能说明 补充提示
npm list vue 查看项目中Vue的具体版本 排查版本兼容问题时使用
npm list 展示项目全量依赖树结构 快速定位依赖冲突问题
npm root -g 查看全局npm模块安装路径 排查全局命令找不到的问题