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: 
  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值