Vue开发全流程命令速查与实战技巧

1. Vue 常用命令速查表概述

作为一名长期奋战在一线的Vue开发者，我深知在项目开发过程中，各种命令的记忆和使用效率直接影响着开发进度。这份速查表不是简单的命令罗列，而是结合我五年Vue开发经验整理出的实战精华，涵盖了从项目初始化到部署上线的全流程命令。

Vue生态中有三个主要的包管理工具：npm、yarn和pnpm。它们各有特点：npm是Node.js自带的包管理器，yarn以快速和可靠著称，而pnpm则通过硬链接节省磁盘空间。在实际项目中，我建议根据团队习惯选择其一并保持统一，避免混用导致依赖问题。

2. 项目创建与初始化

2.1 Vue CLI项目创建

Vue CLI是官方推荐的脚手架工具，虽然现在Vite逐渐流行，但在企业级项目中Vue CLI仍然占据重要地位。

# 全局安装Vue CLI npm install -g @vue/cli # 或 yarn global add @vue/cli # 创建新项目 vue create my-project # 启动开发服务器 npm run serve # 或 yarn serve

注意：如果遇到"vue不是内部或外部命令"的错误，通常是因为全局安装路径未添加到系统PATH中。可以通过npm config get prefix查看全局安装路径，然后手动添加到环境变量。

2.2 Vite项目创建

Vite是新一代前端构建工具，启动速度极快，特别适合现代Vue 3项目。

# 使用npm创建Vite项目 npm create vite@latest my-vue-app --template vue # 使用yarn yarn create vite my-vue-app --template vue # 使用pnpm pnpm create vite my-vue-app --template vue

3. 开发环境常用命令

3.1 依赖管理

依赖管理是项目开发中最频繁的操作之一，不同包管理器命令略有差异：

经验分享：在团队协作项目中，建议使用pnpm或yarn，它们的lock文件能确保所有开发者使用完全相同的依赖版本，避免"在我机器上能运行"的问题。

3.2 开发服务器

启动开发服务器是日常开发中最常用的命令：

# Vue CLI项目 npm run serve # 或 yarn serve # Vite项目 npm run dev # 或 yarn dev # 或 pnpm dev

如果需要在局域网中访问开发服务器（比如移动端测试），可以修改启动命令：

# Vue CLI vue-cli-service serve --host 0.0.0.0 # Vite vite --host

4. 构建与部署

4.1 生产环境构建

生产环境构建会进行代码压缩、Tree-shaking等优化：

# Vue CLI npm run build # 或 yarn build # Vite npm run build # 或 yarn build # 或 pnpm build

构建完成后，静态文件默认生成在dist目录。可以通过以下命令预览生产环境构建：

# 全局安装serve npm install -g serve # 在dist目录运行 serve -s dist

4.2 自定义构建配置

有时需要根据部署环境调整构建配置：

# 指定环境变量文件 vue-cli-service build --mode staging # Vite中可以通过dotenv加载不同环境变量 vite build --mode production

5. 代码质量与测试

5.1 ESLint代码检查

保持代码风格一致对团队项目至关重要：

# 检查代码问题 npm run lint # 或 yarn lint # 或 pnpm lint # 自动修复可修复的问题 npm run lint -- --fix # 或 yarn lint --fix

5.2 单元测试

Vue CLI默认集成了Jest，Vite项目通常使用Vitest：

# Vue CLI项目运行测试 npm run test:unit # 或 yarn test:unit # Vite项目(Vitest) npm run test # 或 yarn test # 或 pnpm test

6. 高级配置与自定义

6.1 自定义端口

当默认端口8080被占用时，可以指定其他端口：

# Vue CLI npm run serve -- --port 3000 # Vite vite --port 3000

6.2 分析构建体积

分析构建产物体积有助于优化：

# Vue CLI npm run build -- --report # 或 yarn build --report # Vite需要安装rollup-plugin-visualizer npm install rollup-plugin-visualizer -D # 然后在vite.config.js中配置

7. 常见问题解决

7.1 依赖安装问题

问题：npm install报错或卡住

解决方案：

1. 清除npm缓存：npm cache clean --force
2. 删除node_modules和package-lock.json
3. 更换国内镜像源：

   npm config set registry https://registry.npmmirror.com

4. 使用cnpm替代：

   npm install -g cnpm --registry=https://registry.npmmirror.com cnpm install

7.2 权限问题

问题：全局安装时出现EACCES权限错误

解决方案：

1. 修改npm全局安装目录权限
2. 使用nvm管理Node.js版本，避免权限问题
3. 对于macOS/Linux，可以加上sudo（不推荐长期使用）

7.3 Vue DevTools无法识别

问题：Vue DevTools不显示Vue应用

解决方案：

1. 确保使用的是官方Vue DevTools扩展
2. 检查是否启用了生产环境构建，开发工具默认不检测生产环境
3. 尝试在main.js中添加：

   app.config.devtools = true

8. 性能优化命令

8.1 依赖分析

# 使用vue-cli-service分析 vue-cli-service build --report # 使用webpack-bundle-analyzer npm install --save-dev webpack-bundle-analyzer # 然后在vue.config.js中配置

8.2 图片压缩

# 安装image-minimizer-webpack-plugin npm install image-minimizer-webpack-plugin --save-dev

9. 多环境配置

大型项目通常需要多环境配置：

# 创建不同环境文件 .env.development .env.production .env.staging # 构建时指定环境 vue-cli-service build --mode staging

10. 插件与扩展

10.1 添加Vue Router

vue add router # 或手动安装 npm install vue-router

10.2 添加Vuex/Pinia

# Vuex vue add vuex # 或 npm install vuex # Pinia (Vue 3推荐) npm install pinia

11. 项目升级

11.1 Vue CLI升级

npm update -g @vue/cli # 或 yarn global upgrade --latest @vue/cli # 检查版本 vue --version

11.2 项目依赖升级

# 使用npm-check-updates检查可更新依赖 npx npm-check-updates # 更新所有依赖 npx npm-check-updates -u npm install

12. 实用技巧

12.1 快速创建组件

# 使用VS Code代码片段 # 或创建脚本自动生成组件模板

12.2 调试命令

# Chrome调试 node --inspect-brk node_modules/.bin/vue-cli-service serve # VS Code调试配置 { "type": "node", "request": "launch", "name": "Vue CLI", "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/vue-cli-service", "args": ["serve"], "console": "integratedTerminal" }

13. 项目文档

13.1 生成文档

# 使用vue-styleguidist npm install -g vue-styleguidist styleguidist server

13.2 组件文档

/** * @vuedoc * @component MyComponent * @description 这是一个示例组件 * @example <my-component :prop1="value" /> */

14. 团队协作

14.1 Git Hook

# 使用husky添加Git Hook npm install husky --save-dev npx husky install # 添加pre-commit hook npx husky add .husky/pre-commit "npm run lint"

14.2 代码提交规范

# 使用commitizen npm install -g commitizen commitizen init cz-conventional-changelog --save-dev --save-exact

15. 项目迁移

15.1 Vue 2到Vue 3迁移

# 使用官方迁移工具 npm install -g @vue/compat # 然后按照官方迁移指南逐步修改

15.2 Webpack到Vite迁移

# 安装vite和插件 npm install vite @vitejs/plugin-vue --save-dev # 创建vite.config.js并逐步迁移配置

16. 性能监控

16.1 Lighthouse测试

# 全局安装lighthouse npm install -g lighthouse # 运行测试 lighthouse http://localhost:8080 --view

16.2 Web Vitals监控

// 安装web-vitals npm install web-vitals // 在项目中集成 import {getCLS, getFID, getLCP} from 'web-vitals';

17. 微前端集成

17.1 使用qiankun

npm install qiankun # 主应用配置 import { registerMicroApps, start } from 'qiankun';

17.2 使用Module Federation

// webpack配置 new ModuleFederationPlugin({ name: 'app1', filename: 'remoteEntry.js', exposes: { './Button': './src/components/Button.vue' } })

18. 移动端开发

18.1 响应式适配

# 安装postcss-px-to-viewport npm install postcss-px-to-viewport -D

18.2 手势支持

# 安装hammer.js npm install hammerjs

19. 服务端渲染

19.1 Nuxt.js

# 创建Nuxt项目 npx create-nuxt-app my-nuxt-app

19.2 自定义SSR

// 安装vue-server-renderer npm install @vue/server-renderer

20. 桌面应用开发

20.1 Electron集成

# 添加Electron vue add electron-builder # 或手动安装 npm install electron --save-dev

20.2 Tauri集成

# 创建Tauri项目 npm create tauri-app

21. 持续集成

21.1 GitHub Actions

# .github/workflows/ci.yml name: CI on: [push] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 - run: npm install - run: npm run build

21.2 Docker部署

# Dockerfile FROM node:16 as build-stage WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build FROM nginx:stable-alpine as production-stage COPY --from=build-stage /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]

22. 项目维护

22.1 依赖审计

# 检查安全漏洞 npm audit # 自动修复 npm audit fix

22.2 依赖清理

# 使用depcheck找出未使用的依赖 npm install -g depcheck depcheck

23. 跨平台开发

23.1 微信小程序

# 使用uni-app npm install -g @vue/cli vue create -p dcloudio/uni-preset-vue my-project

23.2 原生应用

# 使用NativeScript npm install -g @nativescript/schematics vue add @nativescript/schematics

24. 状态管理进阶

24.1 Pinia持久化

# 安装pinia-plugin-persistedstate npm install pinia-plugin-persistedstate

24.2 状态共享

// 使用provide/inject实现跨组件状态共享 import { provide, inject } from 'vue'

25. 动画与过渡

25.1 GSAP集成

# 安装GSAP npm install gsap

25.2 动画库

# 安装animate.css npm install animate.css --save

26. 测试进阶

26.1 E2E测试

# 安装Cypress npm install cypress --save-dev

26.2 组件测试

# 安装Testing Library npm install @testing-library/vue --save-dev

27. 国际化

27.1 Vue I18n

# 安装vue-i18n npm install vue-i18n

27.2 动态语言切换

// 实现语言热切换 watch(locale, (newLocale) => { loadLocaleMessages(newLocale) })

28. 主题切换

28.1 CSS变量实现

:root { --primary-color: #42b983; } .dark-mode { --primary-color: #2c3e50; }

28.2 SCSS变量切换

$themes: ( light: ( primary: #42b983, ), dark: ( primary: #2c3e50, ) );

29. 性能优化

29.1 懒加载

// 路由懒加载 const Home = () => import('./views/Home.vue')

29.2 虚拟滚动

# 安装vue-virtual-scroller npm install vue-virtual-scroller

30. 项目发布

30.1 npm包发布

# 登录npm npm login # 发布包 npm publish

30.2 私有仓库

# 设置私有仓库 npm config set registry http://your-private-registry

31. 错误监控

31.1 Sentry集成

# 安装Sentry npm install @sentry/vue @sentry/tracing

31.2 错误边界

// Vue 3错误边界 app.config.errorHandler = (err, vm, info) => { // 处理错误 }

32. 数据可视化

32.1 ECharts集成

# 安装ECharts npm install echarts vue-echarts

32.2 D3.js集成

# 安装D3.js npm install d3

33. 富文本编辑

33.1 Quill集成

# 安装vue-quill-editor npm install vue-quill-editor

33.2 Tiptap集成

# 安装tiptap npm install @tiptap/vue-3 @tiptap/starter-kit

34. 地图集成

34.1 百度地图

# 安装vue-baidu-map npm install vue-baidu-map --save

34.2 高德地图

# 安装vue-amap npm install vue-amap --save

35. 视频播放

35.1 video.js集成

# 安装video.js npm install video.js @videojs-player/vue

35.2 HLS播放

# 安装hls.js npm install hls.js

36. 音频处理

36.1 Wavesurfer.js

# 安装wavesurfer.js npm install wavesurfer.js

36.2 录音功能

# 安装recordrtc npm install recordrtc

37. 3D渲染

37.1 Three.js集成

# 安装three npm install three

37.2 Babylon.js集成

# 安装babylonjs npm install @babylonjs/core

38. 机器学习

38.1 TensorFlow.js

# 安装@tensorflow/tfjs npm install @tensorflow/tfjs

38.2 图像识别

# 安装face-api.js npm install face-api.js

39. 区块链集成

39.1 Web3.js

# 安装web3 npm install web3

39.2 以太坊交互

# 安装ethers.js npm install ethers

40. 项目重构

40.1 组件拆分

# 使用脚本自动化组件拆分 # 示例脚本可根据项目结构定制

40.2 代码复用

// 使用Composition API提取可复用逻辑 export function useFeature() { // 逻辑代码 return { /* 暴露的方法和数据 */ } }

41. 安全防护

41.1 XSS防护

// 使用DOMPurify净化HTML npm install dompurify

41.2 CSRF防护

// 在axios拦截器中添加CSRF Token axios.interceptors.request.use(config => { config.headers['X-CSRF-TOKEN'] = getCSRFToken() return config })

42. 无障碍支持

42.1 ARIA属性

<button aria-label="关闭">×</button>

42.2 键盘导航

// 添加键盘事件监听 onMounted(() => { window.addEventListener('keydown', handleKeyDown) })

43. 渐进式Web应用

43.1 PWA支持

# Vue CLI添加PWA vue add pwa

43.2 Service Worker

// 自定义Service Worker逻辑 self.addEventListener('fetch', event => { // 缓存策略 })

44. 性能分析

44.1 Chrome DevTools

# 使用性能分析标志启动应用 npm run serve -- --profile

44.2 Webpack分析

# 生成stats.json vue-cli-service build --json > stats.json # 使用webpack-bundle-analyzer分析 webpack-bundle-analyzer stats.json

45. 代码拆分

45.1 路由级拆分

const routes = [ { path: '/about', component: () => import('./views/About.vue') } ]

45.2 组件级拆分

components: { 'my-component': () => import('./MyComponent.vue') }

46. 静态站点生成

46.1 VuePress

# 创建VuePress项目 npm install -g vuepress mkdir vuepress-starter && cd vuepress-starter echo '# Hello VuePress' > README.md

46.2 VitePress

# 创建VitePress项目 npm init vitepress@latest

47. 命令行工具

47.1 创建CLI工具

# 安装commander npm install commander

47.2 交互式命令行

# 安装inquirer npm install inquirer

48. 浏览器扩展

48.1 Chrome扩展开发

# 使用vue-cli-plugin-chrome-ext vue add chrome-ext

48.2 Firefox扩展开发

# 使用web-ext工具 npm install -g web-ext

49. 桌面通知

49.1 Web Notifications

// 请求通知权限 Notification.requestPermission().then(permission => { if (permission === 'granted') { new Notification('标题', { body: '内容' }) } })

49.2 系统通知

# Electron中使用系统通知 npm install electron-notarize

50. 项目文档生成

50.1 TypeDoc

# 安装TypeDoc npm install typedoc --save-dev

50.2 API文档

# 使用swagger-ui npm install swagger-ui-dist