赤兔Team

​ 测试是项目开发里一个非常重要的回归环节，完整的测试能为代码和业务提供保证，减少BUG的出现。 ​ 在前端框架的测试中可以分为3种类型，分别是单元测试、组件测试和端对端测试，这里我们主要讲解的是组件测试，组件测试某种意义上已经包含了单元测试在里面了，点击查看更多测试的介绍。 …

数据持久化指的是把数据保存到本地，常用的有localStorage或者sessionStorage，当然这里我们不是要介绍怎么使用原生的方法，而且通过store的插件要自动的把store数据保存到本地，vue生态里有很多这种类型的库，这里我要介绍的是vuex-persisted…

​ Vuex是什么？官方的解释是Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，通俗一点来说就是有数据需要全局共享（比如在多个组件都有引用），那么就可以使用Vuex来统一管理，Vuex数据是响应式的，数据的更新会触发组件更新，这点和组件内data一样。只不过这是…

​ 在开发环境下有时候需要前端去模拟一些数据接口，原因很简单，因为团队协作的关系，我们很难保证在实现前端业务时后台已经有完整的产出，在一些团队中这甚至是一个硬性的要求，先通过mock接口测试后再去对接后台服务接口，下面我们在项目中引入mock。 vite-plugin-mock…

​ 异步请求的库选择性很多，比如原生的fetch、第三方库request、axios等等，当然对于从Vue2过渡过来的同学而言，首选肯定是axios了，所以本项目也基于axios来封装异步请求模块。 ​ 一个简单的异步请求库就封装好了，当然功能还不是很完善，比如缺少了详细的错误…

​ 关于Vue的第三方UI组件库目前市面上有很多选择，很难说孰好孰坏，找到适合项目的就行，如果是国内的话目前被广大开发者熟知就数element-ui 和 ant-design-vue 了，对于我个人而言两者的设计和使用体验差别并不大，在本项目中将会选择 ant-design-v…

Vue3的单文件组件在结构上和Vue2并无区别，都是由template | script | style 3个部分组成，以下就是一个普通的单文件组件结构。 但是为了方便项目开发，我们需要组件具备以下功能。 下面来测试下效果，新建一个按钮组件 src/components/CtB…

​ 考虑到在Vue2中我们通常喜欢使用@符号来代替src目录，这里我们也来修改vite的配置加上这个别名。 配置修改完毕后就可以在项目使用@符号来访问src目录啦，比如刚才添加的路由配置文件。

​ 路由作为项目的入口重要的部分，我们可以从设计路由开始搭建项目。 安装路由插件。 添加路由配置。 接下来删除src/components下的HelloWord.vue，同时清理App.vue，删除初始化模板的所有代码，替换内容如下，router-view是路由匹配到组件的占位…