本指南整理了 Vue CLI 项目初始化、常用命令、依赖安装及现代替代方案，适用于 Vue 2 与 Vue 3 项目开发。

Vue常用命令

npm、cnpm、npx、pnpm

npm

• npm --- 官方包管理工具

作用

• 安装、卸载、更新第三方包（如 vue、webpack）
• 管理项目依赖（dependencies 和 devDependencies）
• 运行脚本（通过 package.json 中的 scripts）

常用命令

npm init -y           # 初始化 package.json
npm install vue       # 安装包（默认 --save）
npm install -D webpack # 开发依赖
npm uninstall lodash  # 卸载包
npm update            # 更新依赖
npm run build         # 运行脚本

cnpm

• cnpm --- 是由淘宝 NPM 镜像提供的命令别名

作用

• 本质是 npm 的代理，所有命令指向国内镜像。

常用命令

# 全局安装 cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com

# 之后使用 cnpm 替代 npm
cnpm install vue
cnpm install -D eslint

npx

• npx --- 执行包命令的利器

作用

• 临时执行某个 npm 包中的命令，无需全局安装。
• 自动下载、运行、清理（临时安装）。
• 解决“全局安装污染”和“版本冲突”问题

常用命令

 #创建项目	
 npx create-react-app my-app

# 使用特定版本	
npx vue@4.5.15 create project

# 临时运行工具	
npx serve（启动本地服务器）

# 执行本地命令	
npx vue ui（使用项目本地 vue-cli）

pnpm

• pnpm --- 快速、可靠、安全的包管理工具

作用

• 使用硬链接 + 符号链接机制管理依赖，避免重复下载，显著节省磁盘空间。
• 安装速度更快，支持高度并行化操作。
• 严格隔离依赖，防止“幽灵依赖”问题，提升项目可预测性与安全性。
• 完全兼容 npm 生态，支持 package.json 和大多数 npm 命令。
• 内置对 Monorepo（工作区 workspace） 的一流支持

常用命令

# 初始化项目
pnpm init

# 安装所有依赖
pnpm install

# 安装依赖（生产环境）
pnpm add lodash

# 安装开发依赖
pnpm add -D typescript

# 安装全局包（推荐使用 pnpm dlx 替代）
pnpm add -g pnpm

# 临时执行包命令（类似 npx）
pnpm dlx create-react-app my-app

# 使用特定版本临时执行
pnpm dlx vue@4.5.15 create project

# 启动本地服务器（临时运行工具）
pnpm dlx serve

# 执行项目本地命令（自动使用 node_modules/.bin 中的可执行文件）
pnpm vue ui

# 管理工作区（Monorepo）
pnpm -r build          # 在所有 workspace 中运行 build
pnpm add lodash --workspace=my-lib  # 仅安装到指定 workspace

# 查看依赖树
pnpm list

# 清理未使用的依赖
pnpm prune

# 设置镜像源（如淘宝镜像）
pnpm config set registry https://registry.npmmirror.com

总结

工具	类型	核心特点	适用场景	注意事项
npm	官方包管理器	- Node.js 默认包管理工具 - 支持依赖管理、脚本运行、发布包等完整功能 - node_modules 嵌套结构，可能重复安装依赖	- 初学者入门 - 小型项目 - 官方生态兼容性要求高的场景	国内部署慢（需手动换源）；磁盘占用较大；存在“幽灵依赖”风险
cnpm	npm 镜像代理工具	- 本质是 npm，仅将 registry 换为淘宝镜像（npmmirror.com） - 下载速度快 - 命令与 npm 几乎一致	- 国内快速安装依赖（临时使用） - 网络受限环境下的应急方案	不推荐用于团队协作：生成的 package-lock.json 可能不一致；非标准工具
npx	包命令执行工具	- 无需全局安装即可运行 npm 包中的 CLI 命令 - 自动下载、执行、清理临时包 - 支持指定版本运行	- 一次性工具调用（如脚手架 create-react-app） - 避免全局污染 - 快速试用 CLI 工具	依赖 npm 环境；每次执行可能重新下载（除非缓存）
pnpm	现代高性能包管理器	- 硬链接 + 符号链接，节省磁盘空间 - 严格依赖隔离，杜绝幽灵依赖 - 支持 Monorepo（workspace） - 兼容 npm 生态	- 中大型项目 / Monorepo 架构 - 团队协作项目 - 对安装速度、磁盘空间、安全性有要求的场景	极少数对 node_modules 结构敏感的工具需配置 shamefully-hoist

逆天姐的命令

初始化package.json

Npm init  -y

-y 表示使用默认配置快速生成 package.json，无需交互式问答

构建脚手架文件

Cnpm i -D @vue/cli


可视化ui界面

npx vue ui

vue cli 版本

cnpm install -D @vue/cli@4.5.15

查看版本
npx vue -V

创建项目
npx vue create projectName

安装第三方包

scss 和 less

安装scss 工具包
cnpm install sass sass-loader@^12

安装less工具包
cnpm install less@4 less-loader@11 -D

安装图标库

cnpm i -D font-awesome

安装axios

cnpm i axios -s

安装echarts 图表

cnpm i  echarts@4

安装element-ui

cnpm i element-ui -s

自己用的命令

创建项目

# 将npm的镜像源换为淘宝镜像源
npm install -g cnpm --registry=https://registry.npmmirror.com

# 创建项目
npm create vue projectName

#Vue 单文件组件 (.vue)	✅ 支持（需要 @vitejs/plugin-vue）
npm install @vitejs/plugin-vue -D

安装第三方库

• element-plus UI 框架 快速搭建页面布局和交互组件
• axios HTTP 客户端 与后端进行数据交互
• less + less-loader 样式预处理 编写更灵活、结构化的 CSS 样式
• @fortawesome/fontawesome-free 图标库 添加美观的图标增强用户体验
• echarts 数据可视化 展示图表和数据分析结果

npm install element-plus axios less less-loader @fortawesome/fontawesome-free echarts

二种安装方式的区别

特性	npm create vue@3 projectName	npx @vue/cli@latest create projectName
命令全称	npm create vue@3 projectName 或 npm init vue projectName	npx @vue/cli@latest create projectName 或 vue create projectName (需全局安装 @vue/cli)
底层工具	create-vue (Vue 官方推荐的最新脚手架)	@vue/cli (Vue 2/3 的传统命令行工具)
创建的项目类型	Vue 3 项目 (基于 Vite)	可选择 Vue 2 或 Vue 3
构建工具	Vite (默认)	Webpack (默认) 或 Vite (通过插件)
官方推荐状态	官方最新推荐 的项目创建方式	传统方式，官方不再主推，但仍可使用
配置方式	交互式提问：在命令行中逐个询问是否需要 TypeScript, JSX, Vue Router, Pinia, Vitest, ESLint, Prettier	图形化/交互式界面：启动一个基于命令行的交互式 UI，可选择预设或手动选择功能 (如 Babel, TypeScript, Router, Vuex, CSS 预处理器, Linter 等)
项目模板	提供精简、现代化的模板，与 Vite 深度集成	提供更复杂的模板，包含更多可选功能和历史遗留配置
启动速度	极快 (得益于 Vite 的原生 ES 模块加载)	相对较慢 (Webpack 需要打包)
开发体验	更现代、更轻量、HMR (热更新) 速度极快	功能全面，但配置相对复杂，启动和 HMR 较慢
适用场景	新项目、追求现代开发体验、使用 Vue 3	需要 Vue 2 支持、或项目需要 @vue/cli 的特定插件和复杂配置

总结

• 对于新项目，强烈推荐使用 npm create vue@3 projectName。 它是 Vue 团队当前主推的方式。 基于 Vite，提供卓越的开发体验。 配置简单直接，专注于核心功能。
• npx @vue/cli@latest create projectName 主要用于： 需要创建 Vue 2 项目的场景。 依赖 @vue/cli 特有插件或复杂 Webpack 配置的项目。 维护旧的 Vue CLI 项目。

版权所有

版权归属：念宇

许可证：署名-非商业性-禁止演绎 4.0 国际 (CC-BY-NC-ND-4.0)