vue电商后台管理系统--登录页面

登陆页面的效果图

梳理页面结构

3.2 梳理项目结构
在终端中输入npm run serve启动我们刚刚导入进去的项目
正常情况下，会出现以下界面：

于是，我们需要对我们的项目进行梳理，删去一些没有必要的文件
删除以下文件的代码，最后格式如下：

App.vue

<template>
  <div id="app">
    App 根组件
  </div>
</template>

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

<style>
</style>


router中的index.js
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
]

const router = new VueRouter({
   
  routes
})

export default router

最后，直接删掉views中的文件

PS：删除过程中报错属于正常现象，当删除完毕后就不会报错了！

然后，查看浏览器，如果看到页面上 显示App 根组件 则表示项目结构梳理完毕了

渲染Login组件并实现路由重定向

1. 在components目录下创建一个login.vue登录组件
   这个登录组件由三部分组成：分别是结构、样式、行为

<template>
    <div>
      登录组件
    </div>
</template>

<script>
  export default {
   
    name: 'vueComponent',
    components: