一、项目的搭建

1.新建项目，参考新建一个vue3.0项目

2.添加配置

名称	安装命令	作用
element-plus	npm install element-plus --save	UI组件库，使界面更美观
axios	cnpm i --save axios	向后台发起请求，get和post数据，类似jquery的ajax

二、详细步骤

我是看b站up【米修在线】老师的讲解来一步步写的，具体代码和细节可参考【Vue3+TS+element-plus实战后台管理系统-哔哩哔哩】

项目下载地址：https://gitlab.com/hemiahwu/vue3-ts-element-plus/

1、新建出首页、登录注册页、404页，并配置相应的路由

2、布局左右切换动画

核心在于css的巧用、以及绑定了点击事件和样式，通过改变signUpMode的值来实现左右滑动 

getCurrentInstance()方法：setup的执行时组件对象还没有创建，此时不能使用this来访问data/computed/methods/props

我们可以通过 getCurrentInstance这个函数来返回当前组件的实例对象，也就是当前vue这个实例对象

 3、引入element-plus表单组件

在main.ts里引入elementUI，然后对照着elementUI-plus官网找要用的组件就行

其中我遇到一个问题，老是提醒我下载element，但我已经安装过，结果发现main.ts里的引用语句不对，注意现在官网的引用地址已经改了，不要和视频里写一样，版本不同。

注意：可以把自己写的项目上传到自己的gitHub,参考git的使用 ；当你有多个git账号，下载项目需要切换账号时，可在clone的http://后面加上用户名+@，即可弹出登录框，重新登录。

效果：