基于vue开发-创建登录页

最新推荐文章于 2024-01-10 10:51:59 发布
最新推荐文章于 2024-01-10 10:51:59 发布
阅读量803 收藏 7
点赞数 10
文章标签： 使用vue创建项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/centaury32/article/details/134831566
版权

我们使用vue创建完成项目后就开始我们的项目页面开发，如有不清楚怎么操作的可以看博主的前一篇文档

使用vue UI安装路由插件-CSDN博客

在src/views文件夹中创建一个登录页面

在此之前，我们可以先安装一个插件、element、vant、iview等等，可以根据自己的需要去安装，也可以不使用框架开发，这里我使用的是element-plus

安装elemen-plus成功后，在插件中可以查看得到

当然，我们的项目文件也会被改变

安装完成后我们就可以开始写登录页面

在src/views文件夹中创建登录页面login.vue，在router/index.js文件中加入登录页的路由，然后在浏览器中输入登录页的路径就可以访问登录页了

爱吃瓜的程序猿
关注
  • 10
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue开发-基于vue实现的音乐播放器项目.zip
05-09
在这个"Vue开发_基于vue实现的音乐播放器项目"中，我们将深入探讨如何利用Vue.js来构建一个功能完备的音乐播放器。 首先，让我们来看看Vue.js的核心特性。Vue.js的核心设计理念是通过声明式渲染来简化界面更新，这...
管理系统系列--vue-antd-admin基于vue-cli4+vuex+ant-design-vue开发的后台管.zip
02-25
【标题】"管理系统系列--vue-antd-admin基于vue-cli4+vuex+ant-design-vue开发的后台管理框架"揭示了这是一个使用特定技术栈构建的后台管理系统。它主要基于Vue.js，利用Vue CLI 4（Vue.js的命令行工具）进行快速...
vue新增页面开发方法简单总结
BHSZZY的博客
12-07 4628
实际工作中，一般只是新增/修改已有vue项目的页面，很少从零开始搭建一个新的vue项目。 在此简要总结下新增页面的开发方法。1.首先找一个相似的页面，复制一份，修改为不同的名称。 (1)例如，有一个页面，位于这个文件夹： 其中有3个文件： 访问路径是： (2)可以把这个文件夹整个复制，放在相同的目录下，文件夹重命名为，其中也是包含这3个文件。 这样，就可以用以下路径访问到： 2.新文件夹中，一般不用修改，只修改文件即可。3.如果要在其它页面新增按钮，跳转到这个新页面，可以参考以下方法： 说明： 例如，在页
Vue如何创建一个新页面以及相关路由配置详解
HHX_01的博客
01-10 5647
发现宝藏 1.路由配置语法格式 2.vue如何创建一个新页面 1.创建Vue组件 2.设计页面结构 3.配置Vue Router 4.更新导航菜单 5.测试导航 3.vue路由配置常见属性 1. path 2. name 3. component 4. meta 5. query 6. params
【Vue】添加新页面
姜太小白的博客
02-05 1万+
在【src\components\】路径下添加新vue文件，例如下图（图省事直接就复制了HelloWorld.vue，修改了一下里面的内容，需要懂html基础即可） 注意修改name 在【src\router\index.js】文件中添加，以下代码 注mode模式，按照实际要求进行设置，大概意思可参照VUE.js中访问地址的url带有#的问题_weixin_33802505的博客-CSDN博客 至此执行调试或运行，在浏览地址后加上/test即可访问的新建的页面 ...
vue2引入Element UI组件去创建新页面的详细步骤--项目阶段2
快乐学习
04-17 1万+
本文中教学如何从创建vue项目到从Element UI官网引用组件来创建一个新的vue页面，包括路由注册这些都有详细的说明介绍Element UI是一个基于Vue.js的组件库，提供了一套丰富、美观、易用的UI组件，包括表单、弹窗、导航、布局、数据展示等各种常用组件。 Element UI旨在帮助开发者快速构建高质量的Web应用程序，使得前端开发更加高效和便捷。
vue新建页面
weixin_44694538的博客
04-06 3810
在src下面新建view文件夹，然后新建一个vue页面(以/src/view/home.vue为例) vue页面中只能是template为最外层标签，里面有且仅有一个div标签 <template> <div class="home"> <div class="title">这是一个{{msg}}页面</div> ...
基于vue Ant-Design 的表单设计器，快速开发.zip
最新发布
05-15
2、如果开发大型项目，就需要vue-cli完成项目目录结构 部署 热加载等功能 3、因为vue-cli和webpack一样也是一个工具，会依赖于webpack生成一套的webpack配置，所以要使用vue-cli之前，本地要有webpack(而webpack...
Vue开发-基于vue实现的单页面应用demo示例实现.zip
05-09
本示例是基于Vue.js实现的单页面应用程序（Single-Page Application，SPA）的实践教程，旨在帮助开发者了解如何构建一个完整的Vue项目。 在Vue.js中，单页面应用的核心概念是组件化。组件是Vue应用程序的基本构建块...
vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件
05-29
Vue-Sku-Form 是一个专为电商领域设计的前端组件，它基于 Vue.js 框架和 ElementUI 组件库，旨在提供一个高度可配置的 SKU（Stock Keeping Unit，库存单位）表单生成器。在电商网站中，SKU 通常用于唯一标识商品的...
Vue中在新窗口打开页面及Vue-router的使用
08-27
主要介绍了Vue中在新窗口打开页面 及 Vue-router的使用,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue项目重新部署后，提示用户刷新网页
xingchen678的博客
10-12 1118
Vue项目重新部署后，提示用户刷新网页
vue脚手架里设置App.vue为首页登录页面(模拟，不验证账号密码),登录后无残留跳转页面(vue-router路由设置path: ‘ ‘ , component为登录页面)
BKayun的博客
07-21 3201
vue脚手架里设置App.vue为首页登录页面(模拟，不验证账号密码),登录后无残留跳转页面(vue-router路由设置path: ' ' , component为登录页面)
关于vue路由，必须登录才能进去的问题
weixin_42284453的博客
04-29 5288
做项目的时候，有好多页面都是需要登录才能进去的，那么我们可以通过两种方式来实现： 第一种，通过添加白名单的方式. 在permission.js 中添加 const whiteList = [’/login’, ‘/404’] ，[] 里面写白名单路由。 然后在下面进行判断，直接上代码： router.beforeEach((to, from, next) => { NProgr...
新建vue项目如何配置路由实现后台管理系统框架（登录窗、主界面、子界面）
gdgztt的专栏
03-07 2714
要实现一个后台管理系统，大体会涉及到两种类型的页面，一种是独立页面，一种是嵌套页面，独立页面：以登录页面为例，这种页面是独立的，没有区域嵌套，嵌套页面：以首页，用户管理页面为例，像左侧边栏，顶部的欢迎栏是固定的，里面的内容来自子页面，所以独立页面要与嵌套的主界面要是同一级，被嵌套的子页面放到嵌套主界面面的子级，在路由配置上要使用子路由。
Vue 路由 导航守卫(全局守卫、路由独享守卫、组件内守卫)
weixin_37630796的博客
06-20 7467
一.全局守卫 1. router.beforeEach((to,from,next)=>{}) 2. 回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。 3. 如下例：main.js中设置全局守卫 在main.js中，有一个路由实例化对象router。在main.js中设置守卫已是全局守卫。 如下，判断to.path...
vue项目中创建新页面的配置方法
zhouhouyong_web的博客
11-13 6929
vue项目中创建新页面的配置方法 主要目录和新建目录 新建的login.vue页面配置login路由。 新建一个router下的index.js文件（下面是代码） import Vue from 'vue' import Router from 'vue-router' import Login from '@/components/login' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export
Vue创建注册页面
qq_52335038的博客
10-02 1万+
一、需求： 开发注册页面，对输入账号和昵称进行判空处理，两次密码判断是否相同，注册成功后进入到首页 二、删除一些不需要的组件 1：删除scr/views/下的About.vue和Home.vue 2.把App.vue还原成下图： <template> <div id="app"> <router-view /> </div> </template> <style lang="less"> <
vue 如何新建一个项目
热门推荐
ygy211715的博客
02-27 5万+
身为入行未深的小白前端，不断的学习是我们不可丢失的习惯。前端流行的框架也是层出不穷，vue在众多框架中脱颖而出。今天花了两个小时的时间自己走了一边创建vue项目的流程，跟你们分享。1：打开cmd命令行，首先安装node步骤：https://nodejs.org/en/download/      node官网，选择跟自己的电脑匹配的版本进行下载，然后一步步的安装即可，输入node -v，如果出现版...
vue-element-admin登录页面具体实现
04-01
Vue-Element-Admin 是一个基于 Vue.js 的前端开发框架，它提供了一系列的 UI 组件和基础功能，以便开发人员能够快速构建复杂的管理后台应用。 下面是 Vue-Element-Admin 登录页面的具体实现： 1. 创建登录页面组件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱吃瓜的程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值