Vue 项目常用 npm 命令大全

1. 项目创建和初始化命令

1.1 Vue CLI 项目创建

# 全局安装 Vue CLI
npm install -g @vue/cli

# 创建新项目
vue create my-project

# 使用指定版本创建项目
vue create my-project --version 3.0.0

# 基于图形界面创建项目
vue ui

# 快速原型开发（适合小型项目）
npm install -g @vue/cli-service-global
vue serve
vue build

1.2 项目初始化

# 初始化 package.json（交互式）
npm init

# 快速初始化（使用默认值）
npm init -y

# 查看项目信息
npm info vue
npm view vue versions --json

2. 依赖管理命令

2.1 安装依赖

# 安装生产依赖
npm install vue
npm install vue-router vuex

# 安装开发依赖
npm install --save-dev webpack
npm install -D eslint @typescript-eslint/parser

# 安装精确版本
npm install vue@2.6.14

# 全局安装（工具类）
npm install -g @vue/cli
npm install -g create-vue

# 安装 package.json 中的所有依赖
npm install
npm i  # 简写形式

2.2 依赖管理操作

# 查看已安装的包
npm list
npm list --depth=0  # 只看顶层依赖

# 查看过时的包
npm outdated

# 更新包
npm update
npm update vue

# 卸载包
npm uninstall vue-router
npm remove vuex  # 简写

# 清理缓存
npm cache clean --force

3. 开发服务器命令

3.1 启动开发服务器

# 启动开发服务器（最常用）
npm run serve

# //启动项目 ★★★
npm run dev  # 某些项目可能使用这个

# 指定端口启动
npm run serve -- --port 8080

# 指定主机
npm run serve -- --host 0.0.0.0

# 启用 HTTPS
npm run serve -- --https

# 查看所有可用的脚本
npm run

3.2 开发服务器配置

# 使用环境变量
VUE_APP_API_URL=http://localhost:3000 npm run serve

# 设置环境为开发模式
NODE_ENV=development npm run serve

# 使用自定义配置文件
npm run serve -- --config vue.config.js

4. 构建和打包命令

4.1 构建生产版本

# 构建生产版本（最常用）
npm run build

# 构建并分析包大小
npm run build -- --report

# 构建为库
npm run build --target lib
npm run build --target lib --name myLib

# 构建为 Web Components
npm run build --target wc --name my-component

4.2 构建配置选项

# 指定环境
npm run build --mode production
npm run build --mode development

# 启用 source map
npm run build --sourcemap

# 禁用代码压缩
npm run build --no-uglify

# 查看构建详情
npm run build --verbose

5. 代码质量和测试命令

5.1 代码检查和格式化

# ESLint 代码检查
npm run lint
npm run lint -- --fix  # 自动修复问题

# 类型检查（TypeScript 项目）
npm run type-check

# 运行测试
npm test
npm run test:unit      # 单元测试
npm run test:e2e       # 端到端测试
npm run test:watch     # 监听模式运行测试

# 格式化代码
npm run format

5.2 测试相关命令

# 运行所有测试
npm test

# 运行特定测试文件
npm test -- tests/unit/example.spec.js

# 生成测试覆盖率报告
npm run test:coverage

# 调试测试
npm run test:debug

6. 项目维护和部署命令

6.1 依赖安全检查

# 检查安全漏洞
npm audit
npm audit fix         # 自动修复漏洞
npm audit fix --force # 强制修复

# 检查包许可证
npm licenses list

# 查看包依赖树
npm ls
npm ls --production   # 只看生产依赖

6.2 部署相关命令

# 构建分析报告
npm run build -- --report

# 预览构建结果
npm run serve:dist
npx serve dist        # 使用 serve 包预览

# Docker 构建
docker build -t my-vue-app .

7. Vue 特定命令

7.1 Vue CLI 服务命令

# 检查 Vue 项目配置
vue inspect
vue inspect > output.js  # 输出配置到文件

# 添加插件
vue add router
vue add vuex
vue add @vue/eslint

# 升级 Vue 项目
vue upgrade

7.2 组件开发命令

# 生成组件（如果配置了生成器）
npm run generate component MyComponent
npm run g component MyComponent  # 简写

# 生成页面
npm run generate page About

8. 实用工具命令

8.1 调试和监控

# 查看进程占用
npm list --depth=0 | grep vue

# 检查包大小
npx webpack-bundle-analyzer dist/stats.json

# 监控文件变化重新构建
npm run build -- --watch

8.2 环境配置

# 设置环境变量
npm run serve -- --mode staging

# 使用不同的配置文件
npm run serve -- --config vue.staging.config.js

# 跨平台环境变量设置（使用 cross-env）
npm install -D cross-env
cross-env NODE_ENV=production npm run build

9. 常用命令组合和脚本

9.1 package.json 脚本示例

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:staging": "vue-cli-service build --mode staging",
    "build:analyze": "vue-cli-service build --report",
    "lint": "vue-cli-service lint",
    "lint:fix": "vue-cli-service lint --fix",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "dev": "npm run serve",
    "start": "npm run serve",
    "preview": "vue-cli-service serve --mode production",
    "clean": "rimraf dist node_modules/.cache",
    "reinstall": "rimraf node_modules package-lock.json && npm install",
    "audit:fix": "npm audit fix",
    "deps:check": "npm outdated",
    "deps:update": "npm update",
    "postinstall": "npm run build"
  }
}

9.2 常用工作流命令组合

# 完整的开发工作流
git pull origin main          # 拉取最新代码

# //★★★
npm install                   # 安装依赖 一般写在一个新的开源项目，直接运行 npm i //安装相关依赖。
npm run serve                 # 启动开发服务器

# 部署前检查
npm run lint                  # 代码检查
npm run test:unit            # 运行测试
npm run build                 # 构建项目
npm audit                     # 安全检查

# 清理和重新安装（解决依赖问题）
rm -rf node_modules package-lock.json
npm install

10. 故障排除命令

10.1 常见问题解决

# 清除 npm 缓存
npm cache clean --force

# 删除 node_modules 重新安装
rm -rf node_modules
npm install

# 检查权限问题（Mac/Linux）
sudo npm install -g @vue/cli

# 查看详细错误信息
npm run serve --verbose
npm run build --verbose

# 使用不同版本的 Node.js
nvm use 14  # 如果使用 nvm

10.2 网络问题解决

# 使用淘宝镜像
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install

# 或者配置 npm 镜像
npm config set registry https://registry.npmmirror.com

# 恢复官方镜像
npm config set registry https://registry.npmjs.org

11. 实际项目示例

11.1 典型 Vue 项目工作流

# 1. 创建新项目
vue create my-vue-app
cd my-vue-app

# 2. 安装额外依赖
npm install axios element-ui
npm install -D @types/node

# 3. 启动开发
npm run serve

# 4. 代码开发后...
npm run lint              # 检查代码质量
npm run test:unit         # 运行测试

# 5. 构建生产版本
npm run build

# 6. 部署
npm run build --mode production

11.2 多环境配置示例

# 开发环境
npm run serve --mode development

# 测试环境  
npm run build --mode testing
npm run serve --mode testing

# 预生产环境
npm run build --mode staging

# 生产环境
npm run build --mode production

12. 实用技巧和小贴士

12.1 命令别名和快捷方式

# 在 shell 配置文件中设置别名（.bashrc 或 .zshrc）
alias ns='npm run serve'
alias nb='npm run build'
alias nt='npm test'
alias nl='npm run lint'

# 使用 npm 快捷方式
npm i    # npm install
npm un   # npm uninstall
npm t    # npm test
npm run  # 查看所有可用脚本

12.2 性能优化命令

# 分析包大小
npm run build -- --report
npx webpack-bundle-analyzer dist/stats.json

# 检查未使用的依赖
npx depcheck

# 树摇优化检查
npm run build -- --target app --mode production

这些 npm 命令涵盖了 Vue 项目开发的整个生命周期，从项目创建到部署上线的所有常用操作。掌握这些命令可以大大提高开发效率。