Vue 2.x + Element后台模板开发教程（二）登录页面制作

一、项目目录介绍

首先看看项目目录，简单了解一下项目结构。

dist：项目发布目录。

node_modules：项目依赖目录、

public：项目index.html所在目录，其他所有组件都挂载到这个页面。

src：项目文件目录

src\components：项目组件目录

src\router：路由配置文件目录，页面导航。

src\store：vuex配置目录

src\view：项目页面目录

main.js：项目配置文件
二、Login页面代码

在src\view目录下添加Login.vue文件，代码如下：

其中let res = await this.$Http.PostAdminLogin(this.form);这是调用远程接口，用于登录验证，可以暂时屏蔽，直接使用如下代码跳转到后台首页。

this.$router.push({
name: ‘Home’
});

修改src\router\index.js文件，配置项目路由，设置启动页面为登录页面，代码如下：

const routes = [{
        path: '/',
        name: 'Login',
        component: Login
    },
    {
        name: 'Home',
        path: '/Home',
        component: Home,
        meta: {
            title: '系统首页'
        }
    }
]

项目创建是用的vue cli3脚手架创建的。

以下是博主微信欢迎沟通交流。