VUE全家桶项目实战-- 3.根界面和路由的配置,登录界面设计

一.App.vue 根界面的配置

<template>
  <div id="app">
    <!-- 路由占位符,这里设置这个就可以了 -->
   <router-view></router-view>
  </div>
</template>

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

二.在components 路径下创建login.vue

<template>
  <div>
    <div>
      <!-- 表单区域
			ref:表单
			rules:校验
			model:绑定对象
			ref 和model 对应的对象名最好一样,之前设置不一样,出现一些莫名的问题
			label-width: 表单中leael 对应的宽度
		   -->
      <el-form
        ref="user"
        :rules="rules"
        :model="user"
        label-width="80px"
      >
        <el-form-item label="用户名:" prop="username">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
          <!-- prop:校验时绑定的字段
				@keyup.native.enter:回车时触发的事件
			-->
        <el-form-item label="密码:" prop="password">
          <el-input v-model="user.password" type="password" @keyup.native.enter="login"></el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button @click="loginRest">重置</el-button>
          <el-button type="success" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: "