主要步骤：
1、创建登录界面和主页 2、配置路由 3、配置main.js 4、配置App.vue 5、登录界面 6、主页面
一、创建登录界面和主页
二、配置路由
const routes =[
{
path: '/login',
name: 'login',
component: () => import('../views/LoginView.vue'),
meta:{
title:"登录"
}
},
{
path: '/main',
name: 'main',
component: () => import('../views/MainView.vue'),
meta:{
title:"主页"
}
}
]
三、配置main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
Vue.config.productionTip = false;
Vue.use(ElementUI)
/* eslint-disable no-new */
var app = new Vue({
el: '#app',
/* 创建和挂载根实例 */
router,
components: { App },
template: '<App/>'
})
四、配置App.vue
<template>
<div id="app">
<el-container v-if="$route.meta.keepalive">
<el-header class="header">
<keep-alive>
<v_Header></v_Header>
</keep-alive>
</el-header>
<el-container>
<el-aside style="width:200px; height:600px">
<keep-alive>
<v_leftmenu></v_leftmenu>
</keep-alive>
</el-aside>
<el-container>
<el-main>
<keep-alive>
<router-view></router-view>
</keep-alive>
</el-main>
<el-footer style=" padding-left: 0px;padding-right: 0px;">
<v_footer></v_footer>
</el-footer>
</el-container>
</el-container>
</el-container>
<router-view v-if="!$route.meta.keepalive"></router-view>
</div>
</template>
<script>
import LeftMenu from "./components/LeftMenu"
import Header from "./components/Header"
import Footer from './components/Footer'
export default {
name: 'App',
components: {
'v_Header': Header,
'v_leftmenu': LeftMenu,
'v_footer': Footer
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.header{
line-height: 60px;
background-color: #545c64;
text-color: white;
}
</style>
五、登录界面
<template>
<div class="login">
<div>
<el-input placeholder="请输入用户名" v-model="name" clearable class="input_style"></el-input>
<span v-if="error.name" class="err-msg">{{error.name}}</span>
</div>
<div>
<el-input placeholder="请输入密码" v-model="pwd" show-password class="input_style"></el-input>
<span v-if="error.pwd" class="err-msg">{{error.pwd}}</span>
</div>
<div>
<el-button type="primary" @click="login" class="login_style">登录</el-button>
</div>
</div>
</template>
<script>
export default {
name: "Login",
data(){
return {
name: '',
pwd : '',
error : {
name: '',
pwd : ''
}
}
},
methods:{
login(){
const { name, pwd, $router} = this
this.$router.push({
name: "Main",
params: {
username: this.name
}
});
}
}
}
</script>
<style>
.login{
margin-top: 200px;
}
.input_style{
width: 200px;
margin-bottom: 10px;
}
.login_style{
width: 200px;
}
</style>
六、主页面
<template>
<div class="main">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Welcome to the main vue '
}
}
}
</script>
<style>
.main {
font-size: 30px;
color: #000000;
}
</style>
