qq_25081445的博客

上篇文章我们创建了模板项目并成功运行，但是运行后的页面只是一个静态页面，并没有页面间跳转。对于Vue这种单页应用来说，最要紧的就是控制整个系统的页面路由。因为我们使用Vue3的框架，所以这里使用Vue-Router4.0版本。

上一篇文章，我们通过localstorage和axios拦截器实现了账号鉴权。但是 localstorage 作为永久化存储，即使用户关闭浏览器，它还会存在，第二次打开系统已保存的用户token还是存在。所以，注定了不能作为真正的用户鉴权的一份子。那么，谁可以替代呢？正是我们今天要引入的 Vuex ，它是保存在内存中的数据仓库（个人喜欢这么称呼），在系统关闭后会被清空，那么当用户二次打开系统时，就会判定为待登录状态。再加上vuex响应式的原理，更能支持后期我们其它需要存储的数据同步等。所以，vuex是最

前言vue3.0更新了不短的时间，目前很多配套框架如elementui、echarts等主流UI框架都已经做了升级。考虑到目前2.0的项目工程运行速度、开发效率都有了一定瓶颈，所以公司考虑优化技术架构，实现3.0版本升级。升级肯定涉及到兼容性和技术栈的问题，至于两个版本的改动在项目搭建过程中，如果设计到的会适当说明。本文目的在于记录自己项目框架搭建的过程，也记录一下遇到的坑吧。项目创建Vue官方提供了两种方法：通过vite，强烈推荐这种方法，毕竟升级的目的之一也是希望提高一下开发效率，vite

上一篇文章完成了Router4.0的集成，已经页面的切换。那么就应该开始对每个页面的内容做设计了，vue有很很多支持的第三方UI库，其中使用最广泛的就是 elementUI 。这次 elementUI 的集成为了适配我们Vue3.0特地选择了官方对应的版本 element-plus 。安装首先进行依赖的安装，这里直接使用npm方式：npm install element-plus --save然后在 main.js 中引入 element-plus组件，这里直接导入完成的组件库，如果考虑到打包后

上一章我们引入了elementui库以后，整个项目已经可以开始前端页面的开发了。但是，基于现在前后分离架构的原因，我们需要调用后台接口来获取页面展示的数据。关于网络请求使用的方法有很多，比较推荐的就是 axios。官方介绍说支持node，可能在以后使用nodejs做服务开发的时候，也能用到。安装npm install axios在api文件夹下面创建index.js文件：// 引入axiosimport axios from 'axios';// 全局配置axios.defaults.ba