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 推荐关注的工程结构
companyDashboard
├── public
│ └── favicon.ico
├── src
│ ├── App.vue
│ ├── main.ts
│ ├── router
│ │ └── index.ts
│ ├── views
│ │ ├── Splash/index.vue
│ │ ├── UserLogin/index.vue
│ │ └── Dashboard/index.vue
│ ├── components
│ │ ├── TeleportDemo.vue
│ │ ├── GlobalLoading.vue
│ │ ├── GlobalToast.vue
│ │ └── GlobalDialog.vue
│ ├── stores
│ │ ├── useAuthStore.ts
│ │ ├── useUiStore.ts
│ │ └── counter.ts
│ ├── composables
│ │ └── useInfoList.ts
│ └── __tests__
│ ├── router.spec.ts
│ ├── UserLogin.spec.ts
│ ├── useAuthStore.spec.ts
│ └── useInfoList.spec.ts
├── plop-templates
│ ├── component
│ │ ├── index.vue.hbs
│ │ └── component.spec.ts.hbs
│ ├── composable
│ │ ├── index.ts.hbs
│ │ └── composable.spec.ts.hbs
│ └── view
│ └── index.vue.hbs
├── plopfile.js
├── package.json
└── vue3Crash.md1.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) 创建工程
npm create vue@latest companyDashboard
# 2) 按提示勾选
# - TypeScript
# - Router
# - Pinia
# - Vitest
# - ESLint / Prettier
# 3) 进入项目
cd companyDashboard
# 4) 安装脚手架生成的依赖
npm install
# 5) 安装 UI 相关依赖
npm install vuetify @mdi/font
# 6) 安装 Plop
npm install -D plop
# 7) 如果测试中需要 createTestingPinia
npm install -D @pinia/testing2.3 为什么这里单独提到 @pinia/testing
很多教程里会直接在测试代码中写 createTestingPinia()，但如果没有安装 @pinia/testing，测试会直接报模块找不到。
所以只要你准备写组件测试，并且想方便地 mock Pinia，就把它作为测试依赖补上。
2.4 推荐命令清单
{
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"test:unit": "vitest",
"build-only": "vite build",
"type-check": "vue-tsc --build",
"lint": "run-s lint:*",
"lint:oxlint": "oxlint . --fix",
"lint:eslint": "eslint . --fix --cache",
"format": "prettier --write --experimental-cli src/",
"plop": "plop"
}
}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
export default function (plop) {plop.setWelcomeMessage('
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]