vue3+elementUI-plus 项目实战(一)登录

一、项目的搭建

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://后面加上用户名+@,即可弹出登录框,重新登录。

效果:

你可能感兴趣的:(elementui,vue.js,前端)