前端学习（1877）vue之电商管理系统电商系统之头部布局

最新推荐文章于 2024-07-08 00:06:15 发布

前端小歌谣

最新推荐文章于 2024-07-08 00:06:15 发布

阅读量160

点赞数

分类专栏： # 歌谣--前端学习--总进程

本文链接：https://blog.csdn.net/weixin_43392489/article/details/107630557

版权

本文主要探讨了Vue.js在构建电商管理系统中用于头部布局的实现细节，包括router.js的路由配置，login.vue的登录组件，main.js的入口文件设置，global.css的全局样式，element.js中Element UI的使用，以及Home.vue首页组件的设计。此外，还提到了代码规范配置如.prettierrc和eslintrc.js，确保代码质量和一致性。

摘要由CSDN通过智能技术生成

目录结构

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'

Vue.use(Router)

const router= new Router({
    routes:[
        {path:'/',redirect:'/login'},
        {path:'/login',component:Login},
        {path:'/home',component:Home}
    ]
})
//挂载路由导航守卫
router.beforeEach((to,from,next)=>{
    if(to.path==='/login') return next();
    //获取token
    const tokenStr=window.sessionStorage.getItem('token')
    if(!tokenStr) return next('/login')
    next();
})

export default router

<template>

<div class="login_container">
    <div class="login_box">
    <div class="avatar_box">
    <img src="../assets/logo.png">
    </div>
    <!-- 表单区域-->
    <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
    <!-- 登录区域-->
            <el-form-item prop="username">
            <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user">&l