创建登陆页面

router文件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import MyVue from '@/components/MyVue'
import Index from '@/page/index/index'
import Reg from '@/page/reg/index'

Vue.use(Router)

export default new Router({
  routes: [
  	{
      path: '/',
      name: 'Index',
      component: Index
    },
    {
      path: '/Reg',
      name: 'Reg',
      component: Reg
    },
  	{
      path: '/MyVue',
      name: 'MyVue',
      component: MyVue
    },
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

在src创建page文件夹 在page文件夹创建 inde文件夹 在index文件夹创建index.vue文件

<template>
	<div class="indexvue">
		<div class="top">
			<a href="#">登陆拉钩</a>
			<a href="javascript:;" @click='myclick'>注册</a>
		</div>
		<div class="center">
			<input type="text" v-model="name" value="" />
			<input type="text" v-model="password" value="" />
			<button>登陆</button>
		</div>
		<div class="bottom">
			<a href="">手机登陆</a>
		</div>
	</div>
</template>

<script>
	export default {
	  name: 'MyVue',
	  data () {
	    return {
	      msg: 'nihaoya',
	      name:'xxx',
	      password:'yyy'
	    }
	  },
	   created(){
                console.log(456)
            },
	   methods:{
           myclick(){
           	console.log(123);
           	this.$router.push('/Reg');
           }
        },
	}
</script>

<style>
	.indexvue .top{
		display: flex;
		justify-content: space-between;
		padding:0 20px;
		font-size: 25px;
	}
	.indexvue .top a:nth-child(1){
		color: #000;
	}
	.indexvue .top a:nth-child(2){
		color: green;
	}
	
	.indexvue .center input{
		display: block;
		width: 100%;
		height: 50px;
		border:none;
		border-bottom:1px solid #ccc;
	}
	.indexvue .center button{
		display: block;
		width: 100%;
		height: 50px;
		background: green;
		color: #fff;
		font-size: 30px;
		margin-top: 10px;
	}
	
	.indexvue .bottom{
		text-align: left;
		margin-top: 250px;
	}
</style>

更改src下的app.vue文件内容

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /*margin-top: 60px;*/
  margin:0;
  padding:0;
}
a{
	text-decoration: none;
}
</style>