vue3+ts学游记-002登录页面完成

已于 2024-04-21 13:51:38 修改
阅读量132 收藏
点赞数 1
文章标签： node.js typescript vue.js
于 2024-04-20 10:45:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kaikyou3000/article/details/137993282
版权
本文详细介绍了如何在Vue项目中安装必要的插件（如VueVSCodeSnippets和Vetur），创建登录页面并配置路由，设置数据验证规则，以及如何在src目录下规范数据类型。通过一步步引导，帮助读者理解Vue项目的结构和核心功能的实现。
摘要由CSDN通过智能技术生成

第一步

先安装Vue VSCode Snippets插件

再安装Vetur插件，用来代码补全。

第二步

创建登录页面LoginView.vue

配置路由

修改 App.vue 完成基本样式

修改登录页面LoginView.vue样式

修改LoginView.vue登录页面代码，在setup ()中定义ruleForm

解构setup ()中的data对象，以便使用“ruleForm”属性

方法：“...”加上“toRefs(data)”

在setup ()中定义校验规则rules

完善样式后代码

第三步

规范数据类型

在src文件夹下新建type文件夹

新建login.ts文件规范数据类型。

规范数据类型总结

kaikyou3000
关注
vue3+ts+elementui-plus二次封装弹框
蜗牛~~
07-26 2003
【代码】vue3+ts+elementui-plus二次封装弹框。
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口
04-10
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口 预览:http://dongnan185.com:8083/videos/vue3.mp4 一共两个包： 一个接口包 连的本地postgresql 表及信息有截图 库自己装 一个vue包 vite+vue3+ts+eleplus 配置了router vuex axios postcss-px-to-viewport界面自适应 env prod环境等 启动:均是 npm i npm start 仅供学习哈 也在慢慢完善中
vue3+ts+elementplus写一个登录页面教程
肥晨开发的学习之路
03-26 2941
前期准备步骤：创建一个使用 Vue 3 和 TypeScript 的登录页面涉及到多个步骤。
使用Vue3和Element Plus构建用户注册和登录界面
最新发布
有我更精彩的博客
07-28 1561
在本文中，我们使用 Vue 3 和 Element Plus 创建了用户注册和登录界面。通过简洁的代码以及使用 Element Plus 组件，我们不仅提高了开发效率，还实现了美观的界面。你可以在此基础上进一步拓展功能，例如接入后端 API，实现真正的用户验证功能。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作。
Vue3+Ts项目——登录页面跳转到首页
weixin_45594156的博客
12-15 2335
根据我上篇所实现的左边菜单栏之后，需要登录成功跳转home页面。主要分为三步。不前排会报错`Cannot read properties of undefined (reading 'replace')`， 也不要试图用useRouter()直接.replace会报错`inject() can only be used inside setup() or functional components.`等一些问题
TS项目实战四：ts+vue3+elementplus实现登录注册功能
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
03-08 2266
使用vue3+elementplus+vite+pinia实现用户登录、注册相关界面及对应业务流程的开发，对接express后端服务，调用对应接口，实现完整的用户登录注册功能。TS实战项目三十：Vue3项目创建TS实战项目三十：Vue3项目创建。
【vue3+ts后台管理】登录页面完成
Errol's Blog
07-26 7728
登录页面完成
Vue3.0+TS+Element-plus实现(若依版后台管理系统)
web18334137065的博客
03-09 2086
附上源码地址: Vue3.0+TS+Element-plus 后台管理系统模板 准备工作 安装vue3.0，npm create vue3-project 选中这几项即可，不需要vuex, 我们自己封装状态管理。 setup函数使用 在.vue文件中, script 标签下代码都必须带有lang=“ts”。关于setup函数调用时间是在vue2的create之前触发，其他的生命周期相信大家都有所了解，这里就不做赘述了。setup有两种写法 ， 常规写法 <script lang="ts"> i
vue3.0+ts+element-plus项目初体验
热门推荐
marko_zheng的博客
12-03 1万+
vue3.0+ts+element-plus+axios项目初体验 项目基于vue-cli@4.5下开发的，vue-cli4.5和之前的3.0以下的老版本不一样，安装命令也有所不同。 首先得全局安装cli npm install -g @vue/cli //全局安装vue-cli最新版本 第二步：实例化项目 vue create mypro // 创建项目，mypro项目名，项目名中不允许出现大写字母 要使用3.0 选择 >Default (Vue 3 Preview) ([Vue
vue3+ts 开发系统 -目录结构
qq_45428582的博客
02-03 1498
开发系统的部分问题与笔记 系统使用vue3+ts进行开发，ui库使用element-ui，系统需求，使用echarts进行图表绘制。 构建目录结构 assets: 静态目录，存放图标与必需小图 icons image components: 组件目录 public layout: 页面公共header / footer plugins: 插件列表 router: 路由 store: 全局存储 type: 全局类型 utils: 工具目录 services: fetch api helper:
【项目】Vue3+TS CMS 登录模块搭建
森姐姐的博客
02-20 3125
登录模块搭建
Vue3+TS 在线考勤系统-6_搭建登录界面
weixin_44562304的博客
05-25 44
零基础从入门到进阶，系统掌握前端三大热门技术。复制 iconfont.css 文件。复制 iconfont.ttf 文件。
登录（Vue3+ts+vuex+router）
Xiaochen1239的博客
08-11 287
5.登录成功之后保存token，判断用户是否选中记住密码，保存之后相关会用到的信息。1.根据验证rules判断表单是否通过验证，通过之后才能进行下一步。2.获取输入框的值进行密码加密使用的sh256。6.在进入页面的时候就进行用户账号密码的回显。3.进行三次密码错误显示验证码。4.进行验证码校验之后进行登录。
十三、vue3+ts项目框架搭建——登录、退出登录逻辑梳理
xiaoququ的博客
02-18 435
登录 登录之后存储token在pinia，在请求头传递token 拿到token之后获取用户信息，存储在pinia 跳转首页（或退出登录时携带的路径） 退出登录 掉接口告知退出登录 清除跟用户有关的store数据 跳转登录页并携带参数：当前路径（下次登录可直接跳转到退出前的页面）
vue3+ts+element 简单的登陆案例 （二）
你怎么也喜欢嘴巴嘟嘟
04-04 1245
上篇文章都下载好 ，下面进行具体操作 创建 登陆 注册界面以及路由之间的跳转在这里插入图片描述 2. 配置路由（主要解决跨域问题） 有了接口 首先要配置vue.config.js文件（没有则新建） 来解决跨域问题 vue.config.js 文件 点击进去复制 配置好然后进行路由设置 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' const routes: Array<Route
vue3项目（七）----Login
m0_61368323的博客
05-13 7669
1.表单校验主要是使用ElementPlus组件来完成。其中：1）用户名和密码：只需要通过简单的配置（看文档的方式，复杂的功能通过多个不同的组件来拆解）2）同意协议：自定义规则，validator:(rule,value,callback)=>{}3）统一校验：通过调用form实例的方法 validate->true2.登录的业务流程。使用Elmessage来提示用户是否跳转成功。使用useRouter进行路由跳转。3.统一错误提示。使用响应式拦截器。
【Vue3+Ts项目】硅谷甄选 — 路由配置+登录模块+layout组件+路由鉴权
m0_67992720的博客
12-08 2564
定义小仓库数据state类型：src\store\modules\types\type.ts// 定义小仓库数据state类型登录接口返回的数据类型：src\api\user\type.ts登录请求可能返回成功/失败的数据，因此类型需要dataType需要包括成功的数据token和失败的数据message，且是可选的，要加上"?token?:string// 登录接口返回的数据类型封装本地存储数据和读取方法：src/utils/token.js// 存储数据。
Vite+vue3+ts 第五章 登录功能
qq_25853769的博客
03-23 456
5.解决跨域 vite.config.ts。1. login.vue html部分。
Vite3+Vue3+TS+Ant-design-vue3全栈实战：快速构建与配置教程
本篇文档详细介绍了如何进行全栈开发实战，主要结合了前端技术Vite3、Vue3、TypeScript (TS) 和 Ant-Design-Vue3，以及后端技术SpringBoot、MybatisPlus和MySQL。以下是关键知识点的总结： 1. **前端技术栈搭建** ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值