TS+VueCLI4项目重构实践与目录优化

本文档记录了一次作者在实际项目中使用TypeScript (TS) 和 Vue CLI 4 进行重构的经历。项目背景是在作者刚入职实习时，编写了一个基于Vue CLI 2 的项目，随着需求增加和代码阅读难度增大，决定利用新学到的TS进行重构，以提升代码质量和可维护性。 重构的第一步是通过`vue create news`命令创建一个新的Vue CLI 4 项目，并且作者选择了定制化安装依赖，主要包括TS、Vuex、Vue Router，以及SCSS作为CSS预处理器，以支持单元测试。在创建过程中，作者对项目的目录结构进行了优化，如将API、过滤器、全局方法和工具库等分别归类到相应的文件夹，这样有助于提高代码组织和查找效率。 在项目结构中，关键的组成部分包括公共目录（存放静态资源）、src目录（包含核心组件、视图、路由器、Vuex存储、全局类型声明和Vue模块注入等）、测试用例、配置文件（如ESLint、Babel、PostCSS和TS配置）以及Git忽略文件。这种重构旨在遵循单一职责原则和模块化，使得代码更易于理解和维护。 在使用TS的过程中，作者提到虽然初始上手有些不适应，但重构过程中体会到TS带来的类型安全性和代码清晰度的优势，这为后续开发奠定了坚实的基础。同时，作者对Vue 3.0的发布表达了期待，暗示了对技术演进的关注。 这篇文章提供了重构项目从零开始搭建、选择依赖、调整目录结构到使用TS的具体步骤和经验分享，对于其他开发者在面临类似重构场景时具有参考价值。