vue3Crush以及对比vue2

Vue 3 + Vite + TypeScript 实战手册

这篇文章基于当前 companyDashboard 项目整理，面向准备上手 Vue 3 + Vite + TypeScript 的读者。除明确标注“可选扩展”的部分外，文中的目录、命令和代码都以当前仓库为准，适合一边看文档一边对照项目。
GitHub 仓库：https://github.com/kunyashaw/vue3Crush

目录

• 
  
  • 工程总览
    
  
  
• 
  
  • 初始化与依赖安装
    
  
  
• 
  
  • Plop 模块与 hbs 模板
    
  
  
• 
  
  • 应用入口与路由骨架
    
  
  
• 
  
  • Store 与 Composable
    
  
  
• 
  
  • 各个 View 实战代码
    
  
  
• 
  
  • Teleport 与全局 UI 模块
    
  
  
• 
  
  • 单元测试实践
    
  
  
• 
  
  • Vue 2 与 Vue 3 特性对比总表
    
  
  
• 
  
  • 常见坑
    
  
  

1. 工程总览

1.1 当前项目在做什么

这是一个典型的后台控制台示例项目，页面流转很清晰：

• 访问 /，先进入 Splash 闪屏页。
  
• 2 秒后自动跳转到 /login。
  
• 用户登录成功后进入 /dashboard。
  
• Dashboard 里同时演示了业务大盘、Pinia、Composable、Teleport 和生命周期钩子。
  

1.2 技术栈一览

模块技术作用构建工具Vite本地开发、打包构建、模块热更新核心框架Vue 3组件化开发与响应式渲染语言TypeScript类型约束、编辑器提示、重构安全性路由Vue Router页面切换与导航守卫状态管理Pinia全局身份信息与 UI 状态管理UI 框架Vuetify现成的后台组件与 Material 风格控件图标@mdi/fontVuetify 图标依赖测试Vitest + @vue/test-utilsStore、Composable、组件测试模板脚手架Plop自动生成 View / Component / Composable1.3 推荐关注的工程结构

1. companyDashboard
2. ├── public
3. │   └── favicon.ico
4. ├── src
5. │   ├── App.vue
6. │   ├── main.ts
7. │   ├── router
8. │   │   └── index.ts
9. │   ├── views
10. │   │   ├── Splash/index.vue
11. │   │   ├── UserLogin/index.vue
12. │   │   └── Dashboard/index.vue
13. │   ├── components
14. │   │   ├── TeleportDemo.vue
15. │   │   ├── GlobalLoading.vue
16. │   │   ├── GlobalToast.vue
17. │   │   └── GlobalDialog.vue
18. │   ├── stores
19. │   │   ├── useAuthStore.ts
20. │   │   ├── useUiStore.ts
21. │   │   └── counter.ts
22. │   ├── composables
23. │   │   └── useInfoList.ts
24. │   └── __tests__
25. │       ├── router.spec.ts
26. │       ├── UserLogin.spec.ts
27. │       ├── useAuthStore.spec.ts
28. │       └── useInfoList.spec.ts
29. ├── plop-templates
30. │   ├── component
31. │   │   ├── index.vue.hbs
32. │   │   └── component.spec.ts.hbs
33. │   ├── composable
34. │   │   ├── index.ts.hbs
35. │   │   └── composable.spec.ts.hbs
36. │   └── view
37. │       └── index.vue.hbs
38. ├── plopfile.js
39. ├── package.json
40. └── vue3Crash.md

复制代码

1.4 这个项目最值得学习的点

• Router + Pinia + Composable 的职责划分很典型。
  
• Dashboard 页面把「局部状态」和「全局状态」拆得比较明确。
  
• Teleport 的演示很适合用来理解“代码写在哪”和“DOM 渲染在哪”是两件事。
  
• Plop 把重复劳动自动化了，适合团队约束目录结构。
  
• useUiStore + GlobalLoading/Toast/Dialog 这一套很适合作为全局交互层的基础设施。
  

2. 初始化与依赖安装

2.1 环境要求

在开始之前，最好先把本地环境对齐，否则你可能会在安装依赖或运行脚本时遇到版本问题。

• Node.js：^20.19.0 || >=22.12.0
  
• npm：跟随 Node.js 自带版本即可
  
• 包管理器：本文统一使用 npm
  

上面的 Node 版本要求来自当前项目 package.json 里的 engines.node 配置。如果你的 Node 版本偏旧，建议先升级再继续。

2.2 创建项目

1. # 1) 创建工程
2. npm create vue@latest companyDashboard
4. # 2) 按提示勾选
5. # - TypeScript
6. # - Router
7. # - Pinia
8. # - Vitest
9. # - ESLint / Prettier
11. # 3) 进入项目
12. cd companyDashboard
14. # 4) 安装脚手架生成的依赖
15. npm install
17. # 5) 安装 UI 相关依赖
18. npm install vuetify @mdi/font
20. # 6) 安装 Plop
21. npm install -D plop
23. # 7) 如果测试中需要 createTestingPinia
24. npm install -D @pinia/testing

复制代码

2.3 为什么这里单独提到 @pinia/testing

很多教程里会直接在测试代码中写 createTestingPinia()，但如果没有安装 @pinia/testing，测试会直接报模块找不到。
所以只要你准备写组件测试，并且想方便地 mock Pinia，就把它作为测试依赖补上。
2.4 推荐命令清单

1. {
2.   "scripts": {
3.     "dev": "vite",
4.     "build": "run-p type-check "build-only {@}" --",
5.     "preview": "vite preview",
6.     "test:unit": "vitest",
7.     "build-only": "vite build",
8.     "type-check": "vue-tsc --build",
9.     "lint": "run-s lint:*",
10.     "lint:oxlint": "oxlint . --fix",
11.     "lint:eslint": "eslint . --fix --cache",
12.     "format": "prettier --write --experimental-cli src/",
13.     "plop": "plop"
14.   }
15. }

复制代码

3. Plop 模块与 hbs 模板

Plop 的价值很简单：把“新建一个 View / Component / Composable 时重复复制粘贴”的动作交给脚手架。

为了避免部分博客平台把“双花括号模板语法”误当成可执行模板，下面的展示代码统一用 __PROPER_CASE_NAME__、__CAMEL_CASE_NAME__ 这类占位符代替。
如果你回到仓库里看真实文件，会看到 Handlebars helper 版本的写法，也就是把 properCase name、camelCase name、dashCase name 这些 helper 包在双花括号里。

3.1 plopfile.js

[code]export default function (plop) {  plop.setWelcomeMessage('
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！