记一次用ts+vuecli4重构项目的实现

项目背景：一个以前的项目（刚入职实习的时候写的，用的vuecli2 ），然后这次要添加修改东西，看着代码看的头大，冲动之下就重构了（想打死自己，写的啥玩意），刚好用下最近刚学的typescript,从搭建开始，一步步更新记录下，怕自己之后忘了再回过头来看看。（顺便说一句，用起来有点别扭，不过还是挺爽的，期待vue3.0… ）一.项目搭建：使用命令vue create news创建项目配置自定义，贴一下我自定义的安装依赖ts+vuex+router这几个肯定是要的，这里的css我选择的是scss，unit测试也来一个之后一些的选项就自己选择3.搭建好后【知识点详解】 1. **Vue CLI 4**：Vue CLI是Vue.js官方提供的一个命令行工具，用于快速搭建Vue.js项目。Vue CLI 4是其最新版本，提供了更高效、更智能的脚手架功能。它可以自动生成项目模板，包含一系列预设的配置，如Vue、Vuex、Vue Router等，帮助开发者快速启动项目。 2. **TypeScript**：TypeScript是JavaScript的超集，增加了静态类型系统，提供更好的类型检查和错误预防，有助于提高代码质量。在Vue CLI 4中集成TypeScript，可以为Vue项目带来强类型支持，提高开发效率并减少运行时错误。 3. **Vue Router**：Vue Router是Vue.js的官方路由库，用于管理应用的视图层。在Vue项目中，通过Vue Router可以轻松实现页面间的导航和状态管理。 4. **Vuex**：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 5. **SCSS**：Sass (Syntactically Awesome Style Sheets)是CSS的预处理器，提供了变量、嵌套规则、混合、函数等特性，让CSS编写更加简洁和模块化。 6. **项目重构**：重构是在不改变软件外部行为的情况下，改善其内部结构。在这个例子中，作者因为原有项目代码难以理解和维护，决定使用Vue CLI 4和TypeScript进行重构，以提高代码可读性和可维护性。 7. **目录结构调整**：在项目搭建完成后，作者对初始的目录结构进行了优化，将接口、过滤器、样式、工具方法等分别归类到对应的目录下，便于代码组织和团队协作。 8. **配置文件**： - `tsconfig.json`：TypeScript的配置文件，用于设置TypeScript编译器的行为，例如类型检查规则、源码输出格式等。 - `.eslintrc.js`：ESLint的配置文件，用于定义代码风格和编码规范。 - `vue.config.js`：Vue CLI的配置文件，可以自定义Vue CLI的构建步骤，例如设置公共路径、调整webpack配置等。 - `babel.config.js`：Babel的配置文件，用于转换ES6+语法到浏览器兼容的JavaScript。 - `postcss.config.js`：PostCSS的配置文件，用于处理CSS，添加前缀、转换语法等。 9. **webpack配置**：在`vue.config.js`中，作者配置了`configureWebpack`，例如设置项目名称、开发环境下的源码映射、devServer参数，以及代理配置，以便在开发阶段将API请求代理到指定的目标服务器。 10. **Vue 3.0**：Vue 3.0是Vue.js的重大更新，引入了许多新特性，如Composition API、Teleport、Suspense等，提高了性能和开发体验。作者在文中表达了对Vue 3.0的期待。 11. **单元测试**：在项目中加入单元测试，可以确保代码的正确性，并在后续的开发和重构过程中提供保障。Vue CLI 4提供了对Jest或者Mocha等测试框架的集成，方便进行组件或功能的单元测试。这个项目重构的过程涵盖了现代前端开发中的常见技术栈，包括Vue.js、TypeScript、Vue Router、Vuex、SCSS，以及项目构建、配置和测试等多方面知识。重构的目的在于提高代码质量和维护性，而使用Vue CLI 4和TypeScript等工具则能有效地支持这一目标的实现。