【springboot&vue 音乐网站 3】＜07-09＞ Vue页面结构介绍

1 Vue页面结构介绍

代码汇总:【springboot&vue 音乐网站2(07-08)】

• 1.main.js 逻辑入口
  • 该文件是逻辑入口，主要用来初始化Vue实例并加载需要的插件及各种公共组件，如vue- router、mui、App.vue等
• 2.router内.js 路由文件 (router/index.js)
  • 该文件是一个单独的路由文件。在后面的步骤中将会创建Login.vue(登录)和Register.vue(注册)两个组件，所以需要在路由文件中导人这两个组件，并配置相应的路由规则
• 3.App.vue 渲染路由组件
  • 该文件是项目的根组件(或者叫作主组件),所有页面都是在App.vue下进行切换的。例如，可以定义公共的样式或者动画等。

1.1 mian.js

1.2 router/index.js

1.3 App.Vue

2 Login.vue

<template>
    <div class="login-page">
        <div class="login-block">
            <div class="login-head">MUSIC.COM后台管理<br></div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  >
                    <el-form-item  prop="username">
                        <el-input type="text" placeholder="请输入账户" v-model="ruleForm.username"></el-input>
                    </el-form-item>
                    <el-form-item  prop="password">
                        <el-input type="password" placeholder="请输入密码" v-model="ruleForm.password"></el-input>
                    </el-form-item>
                    <el-form-item class="login-btn">
                        <el-button type="primary" @click="submitForm">登录</el-button>
                    </el-form-item>
            </el-form>
        </div>
    </div>
</template>


<script>
    export default{
        mame:"ss",
        data(){return{
                ruleForm:{username:"admin",password:"admin"},
                rules:{
                    username:{required:true,message:'请输入用户名',trigger:'blur'},
                    password:{required:true,message:'请输入密码',trigger:'blur'}
                }
        }},
        methods:{
            submitForm(){
                alert('提交了'),
                console.log(ruleForm.username)
            }
        }
    }
</script>
<style scoped>   
    .login-page{
        background:url("../assets/img/background.jpg");
        position: relative;
        height: 100%;
        width: 100%;
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
    }
    .login-block{
        position: absolute;
        width: 400px;
        height: 400px;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .login-head{
        text-align:center;
        font-size:40px;
        color: white;
    }
    .login-block form{
        margin-top:40px;
        margin-left: 0px;
        padding:30px;
        background-color: white;
        border-radius:10px;
    }
    .login-btn{
        margin:0;
        margin-left: 0px;
        text-align: center;
    }
    .login-btn button{
        width:100%;
    }