如何创建vue项目请参考《vue.js初探（二）vue项目创建》首先看看项目目录，简单了解一下项目结构。

dist：项目发布目录。

node_modules：项目依赖目录、

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

src：项目文件目录

src\components：项目组件目录

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

src\store：vuex配置目录

src\view：项目页面目录

main.js：项目配置文件

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

<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span class="sys-name">孔子人才网后台管理系统</span>
        </div>
        <div class="card-body">
            <el-form ref="form" :model="form" :rules="ruleForm">
                <el-form-item prop="name">
                    <el-input type="text" v-model="form.loginName" auto-complete="off" placeholder="请输入用户名">
                        <template slot="prepend"><i style="font-size:20px" class="el-icon-user-solid"></i></template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="form.loginPass" auto-complete="off" placeholder="请输入用户密码">
                        <template slot="prepend"><i style="font-size:20px" class="el-icon-s-goods"></i></template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button style="width:100%;" type="primary" @click="submit" :loading="logining">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
</template>

<script>
    // @ is an alias to /src
    export default {
        name: 'Login',
        data() {
            return {
                logining: false,
                form: {
                    loginName: 'admin',
                    loginPass: '666666'
                },
                ruleForm: {
                    loginName: [{
                        required: true,
                        message: '请输入账号',
                        trigger: 'blur'
                    }],
                    loginPass: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }]
                }
            }
        },
        methods: {
            submit() {
                 this.$refs.form.validate(async (valid) => {
                    if (valid) {
                        let res = await this.$Http.PostAdminLogin(this.form);
                        alert(res.data.msg)
                        this.$router.push({
                            name: 'Home'
                        });
                        //this.logining = true;
                        /*if (this.form.name === 'admin' &&
                            this.form.password === '123456') {
                            this.logining = false;
                            sessionStorage.setItem('user', this.form.name);
                            this.$router.push({
                                name: 'home'
                            });
                        } else {
                            this.logining = false;
                            this.$alert('name or password wrong!', 'info', {
                                confirmButtonText: 'ok'
                            })
                        }*/
                    } else {
                        console.log('error submit!');
                        return false;
                    }
                })
            }
        }
    }
</script>

<style>
    body {
        background-color: #2b374b;
    }

    .sys-name {
        font-size: 18px;
    }

    .box-card {
        width: 480px;
        margin: 0 auto;
        margin-top: 160px;
    }

    .card-body {
        padding: 0 30px;
    }
</style>

其中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脚手架创建的。

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