vscode用vue框架写一个登陆页面

目录

一、创建登录页面

二、构建好登陆页面的路由

三、编写登录页代码

1.添加基础结构

2.给登录页添加背景

3.解决填充不满问题

4.我们把背景的红颜色替换成背景图：

5.在页面中央添加一个卡片来显示登录页面

6.设置中间卡片页面的左侧

7.设置右侧的样式及数据

8.最后效果如下：

9.登录页面的总代码如下

---

写在前面：
登录页Login.Vue的代码会在文章最后给出，其他代码，须看文章图片修改。

一、创建登录页面

views文件是管理页面组件的文件夹，再此文件夹上右击新建文件，命名为Login.Vue,如下两图：

        

小知识点补充：

组件分为两种：页面组件 和 功能组件。
1.页面组件
用来构建独立页面的组件，保存在 views 目录中，页面组件中可以包含多个功能组件。

2.功能组件
我们可以将页面中一些独立的小功能制作成组件，这些组件可以被页面组件引入使用，比如：翻页、时间插件等，功能组件保存在 components 目录中，这些组件不能独立显示，只能被包含在一个页面组件中使用。

页面组件和功能组件的关系：（每个页面就是一个页面组件，每个页面中可以包含多个功能组件）

二、构建好登陆页面的路由

把原先的路由删掉，最后App.vue的script块和template块写成如下这样：

接着去①管理路由的main.js文件下改路由路径,
②把原来的路径注释掉，增加登录页的注释，
③把根路由添加为登录页，三步对应如下图中三步

三、编写登录页代码

1.添加基础结构

打开登录页组件（Login.vue）,添加好vue3组件文件模板，如下：

<template>
    
</template>
<script setup>
 
</script>
<style >
 
</style>

相关知识：