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

csdn推荐

目录

写在前面：

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

一、创建登录页面

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

小知识点补充：

组件分为两种：页面组件 和 功能组件。

1.页面组件

用来构建独立页面的组件，保存在 views 目录中，页面组件中可以包含多个功能组件。

2.功能组件

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

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

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

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

接着去①管理路由的main.js文件下改路由路径,

②把原来的路径注释掉，增加登录页的注释，

③把根路由添加为登录页，三步对应如下图中三步

三、编写登录页代码 1.添加基础结构

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

相关知识：

文章来源:https://blog.csdn.net/weixin_46281068/article/details/139837815