前端vue3+ts规范

### Vue3 和 TypeScript 结合使用的编码规范与最佳实践 #### 一、项目初始化与环境搭建 为了确保开发体验流畅，建议使用 VSCode 作为 IDE 并安装必要的插件来支持 Vue3 和 TypeScript 开发。这些工具可以显著提升代码提示和语法检查的能力[^2]。 #### 二、文件结构设计 合理的目录结构可以帮助团队成员更快理解项目逻辑并降低维护成本。通常情况下，推荐采用以下结构： ```plaintext src/ ├── assets/ # 静态资源 ├── components/ # 可重用组件 ├── views/ # 页面级组件 ├── store/ # 状态管理 (Vuex 或 Pinia) ├── services/ # API 请求封装 ├── types/ # 自定义类型声明 └── App.vue # 主入口组件 ``` 通过清晰的分层设计，可以使代码更易于管理和扩展[^3]。 #### 三、TypeScript 类型定义 在 Vue3 中结合 TypeScript 使用时，应充分利用其强大的类型系统以增强代码的安全性。例如，在全局方法或属性上可以通过模块扩展的方式引入自定义类型[^4]。 以下是为 `Vue` 实例添加 `$axios` 方法的一个例子： ```typescript // 定义 AxiosInstance 类型 import type { AxiosInstance } from 'axios'; declare module '@vue/runtime-core' { interface ComponentCustomProperties { $axios: AxiosInstance; } } ``` 完成上述操作后即可在任何组件内部直接调用 this.$axios 而无需担心类型丢失问题。 #### 四、组件编写方式 当使用 Composition API 构建功能复杂的业务场景时，应当遵循单一职责原则(Single Responsibility Principle)，即每个函数只负责一件事情；同时也要注意合理拆分子组件以便复用逻辑单元[^1]。 下面展示了一个简单的计数器实现案例： ```typescript <script setup lang="ts"> import { ref, computed } from 'vue'; const count = ref(0); const doubleCount = computed(() => count.value * 2); function increment() { count.value++; } </script> <template> <div> <p>Current Count: {{count}}</p> <button @click="increment">Increment</button> <p>Double Count: {{doubleCount}}</p> </div> </template> ``` #### 五、测试驱动开发(TDD) 鼓励实施 TDD 流程，先写好对应的 unit test case 再着手实际编码工作。这样不仅能够提前暴露接口不匹配等问题还能有效保障重构过程中的稳定性。 ---