3.登录界面

只保留router-view

还要引入一些公共样式
- npm install normalize.css或者去github上下载，然后引入
- 还需在main.ts中引入

- 还可以自己写一些公共样式，但是需要在main.ts中导入才会生效

插入背景图片
views下面放主要组件比如login、main，如果它们有一些只属于自己的组件，那么就新建一个cpns文件存放。
再新建一个components放一些业务组件（这个项目公共会用到的一些组件）
创建一个base-ui存放，多个项目可能都会用到
利用element-plus中的tabs标签和form标签完成基本布局
在使用el-input时发现没办法输入，这是因为el-input没有进行v-model绑定
使用表单验证需要编写rules，然后将其动绑定到el-form上。
哪些东西抽到抽到hooks中，哪些抽到conifg中？答：如果我们要抽取的东西中用到了ref、reactive、useStore、onMOunted等时，就抽取到hooks中，否则就抽取到config中。所以我们编写的rules可以抽到config中，让代码结构更清晰。
后续优化忘记密码页面跳转功能

点击立即登录的登录逻辑写在哪里呢？因为login-panel这个组件拿不到账号密码，也拿不到手机号和验证码，所以我们最好的是分别在login-account组件和login-phone中写登录逻辑。注意注意！！！父组件向子组件通信通过props，子组件向父组件通信通过emits。这里是父组件要拿到子组件的方法：在子组件中定义方法后，父组件通过ref拿到子组件，直接通过Ref调用即可。ref<>接受的泛型应该是对应实例的类型

怎么在login-account中进行真正的登录逻辑呢？通过ref获取el-form组件

isValid是判断输入的内容是否满足传入的规则，在isValid为true时进行真正的登录逻辑：1.判断是否保存密码（要注意，ref的值都要通过value获取），进行本地缓存（区分sessionStorage和localStorage），考虑到项目中有很多内容可能都需要进行缓存，可以新建一个utils文件夹封装一个cache类，在类中对缓存

进行登录验证：1.进行网络请求，拿到数据；2.数据保存到某个位置；3.发送其他请求（请求当前用户的信息）；4.拿到用户菜单；5.跳到首页这里请求到的数据肯定不能保存在这了，那保存到哪呢？vuex！可我们还要进行网络请求啊？不怕，我们有actions！
现在开始vuex中的代码（进行数据请求、数据保存）：为了让state中可以不随便加一些东西，我们可以规定state的类型（IRootstate）
　　这里可以采用vuex模块化的思想：

　　　　又因为每个文件中类型可能会定义很多，所以我们可以抽到types.ts中

　　　　定义完login模块后还需要对其进行注册：

　　　　　　记住还要给每个模块一个命名空间哦!namespaced: true

晕了，之前写了一部分东西，忘记保存了。

现在可以在store-login-login.ts的actions中添加异步代码了

然后在service-login-login.ts中进行数据请求（这里要注意一些类型的定义）

跨域问题：

在vue.config.js中做如下配置

配置proxy，设置代理来解决跨域问题。target：表示代理到的目标地址；pathRewrite：？

changeOrigin：表示是否更新代理后请求的headers中host地址

同时还要将网络请求的BASE_URL的值设置为/api