Vue 商场首页头部布局

封装基础网络请求，前后端联调请求后端接口

npm install axios -S

src/network/requestConfig.js

import axios from 'axios';
import store from "@/store";
export function request(config){
	const instance = axios.create({
		baseURL:"http://127.0.0.1:8000/",
		// baseURL:process.env.VUE_APP_BASE_URL,
		timeout:5000,
	})
	
	// 请求拦截
	instance.interceptors.request.use(config=>{
		// 一般来说我们会在这里边给一些实例加上token
		const token = window.localStorage.getItem("token");
		if(token){
			// config.headers.Authorization="token";
			config.headers.Authorization=token;
		}
		
		// 直接放行
		return config;
	},err=>{
		// 这里写一些错误的代码在这里
	})
	
	// 响应拦截
	instance.interceptors.response.use(res=>{
		if(res.data.status==false){
			window.localStorage.setItem("token","");
			store.commit("setIsLogin",false);
		}

		return res.data?res.data:res;
	},err=>{
		// 响应错误的在这里处理，比如404  500这些特殊的状态码
		// 咱们跳转一个特定的处理页面
	})
	
	return instance(config);
} 

src/network/home.js

import {request} from "./requestConfig.js"


export function getMainMenu(){
	return request({
		url:"/main_menu",
	})
}

测试

<script setup>
	import {getMainMenu} from "@/network/home"
	getMainMenu().then(res=>{
		console.log(res)
	})
</script>

配置基础 router 信息

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    meta:{
      title:"慕西商城首页"
    }
  },

]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to,from)=>{
	document.title = to.meta.title;
})

export default router

src/views/HomeView.vue

<template>
    <p>首页</p>
</template>

慕西商城首页顶层标题栏开发

src/assets/css/config.css
全局配置

@import './base.css';
/*定义全局变量*/
:root {
    --font-red: #f10215;
    --font-gray: #999;
    --content-width:1200px;
	--el-color-danger:#e2231a !important;
}

main.js
全局引入

import "@/assets/css/config.css"

这个宽度是1200 引用在src/assets/css/config.css全局中设置–content-width

<template>
    <div class="wrapper">
        <div class="header">
            <a href="#">你好，请登录</a>
             <a href="#">免费注册</a> |
              <a href="#">我的订单</a>
        </div>
    </div>
</template>

<style lang="less" scoped>
    //最外层
    .wrapper{
        background-color: #e3e4e5;
        height: 30px;
        .header{
            //引用全局变量中的宽度变量
            width: var(--content-width);
            margin: 0 auto;   //居中
            text-align: right; //右对齐
            line-height: 30px;  //上下对齐
            a{
                color: var(--font-gray);
                // 鼠标滑过的效果
                &:hover{
                    color: var(--font-red);
                }
                margin-left: 10px;
            }

        }
    }
</style>

取地址符空格增加免费注册和右边分割线的距离

<a href="#">免费注册</a> &nbsp;&nbsp;|

也可以把免费注册设置为一直是红色的

慕西商城首页头部结构开发

components/home/Header.vue

<template>
    <div class="main">
        <div class="content">
            <div class="logo">
                我是logo

            </div>
            <div class="search-box">
                我是搜索框
            </div>
            <div class="right">
                我是右侧的图片
            </div>

        </div>
    </div>
</template>

<script>

</script>

<style lang="less" scoped>
    .main{
        .content{
            width: var(--content-width);
            margin: 0 auto;   //居中对其
            height: 140px;
        }
    }

</style>

views/HomeView.vue 中引入

<template>
    <div>
        <Shortcut></Shortcut>
        <Header></Header>
        <div>
            我是主页
        </div>
    </div>
</template>

<script setup>
import Shortcut from "@/components/common/Shortcut.vue"
import Header from "@/components/home/Header"

</script>

让标签浮动，在一行显示

<template>
    <div class="main">
        <div class="content">
            <div class="logo fl">
                <Logo></Logo>

            </div>
            <div class="search-box fl">
                我是搜索框
            </div>
            <div class="right fl">
                <img src="@/assets/images/header-right.png"> 
            </div>

        </div>
    </div>
</template>

<script setup>
import Logo from "@/components/common/Logo.vue"
</script>

<style lang="less" scoped>
    .main{
        .content{
            width: var(--content-width);
            margin: 0 auto;   //居中对其
            height: 140px;
            border: 1px solid red;
        }

        .search-box{
            width: 800px;
        }
        .right{
            img{
                width:200px;
            }
            line-height: 140px;
        }
    }

</style>

common/Logo.vue

<template>
    <div>
        <img class="logo" src="@/assets/images/logo/logo-big.png" alt="">
    </div>
</template>



<style scoped lang="less">
div{
    .logo{
        width: 100px;
        height: 100px;
    }
    line-height: 140px;
}
    
</style>

可以让右边的图片再往右靠边

慕西商城首页头部搜索框开发

src/components/home/Header.vue

<template>
  <div class="main">
    <div class="content">
      <div class="logo fl">
        <Logo></Logo>
      </div>
      <div class="search-box fl">
        <div class="input-search fl">
          <SearchBox></SearchBox>
        </div>
      </div>
      <div class="right fr">
        <img src="@/assets/images/header-right.png" />
      </div>
    </div>
  </div>
</template>

<script setup>
import Logo from "@/components/common/Logo.vue";
import SearchBox from "@/components/home/SearchBox.vue";
</script>

<style lang="less" scoped>
.main {
  .content {
    width: var(--content-width);
    margin: 0 auto; //居中对其
    height: 140px;
    // border: 1px solid red;
  }

  .search-box {
    width: 800px;
    height: 70px;
  }
  .right {
    img {
      width: 200px;
    }
    line-height: 140px;
  }
}
</style>

home/SearchBox.vue

<template>
  <div class="main">
    <div class="content">
      <input type="text" placeholder="请输入搜索条件" />
      <span class="iconfont icon-fangdajing"></span>
    </div>

    <div class="hotword">
      <a
        v-for="(item, key) in hotWords"
        :key="key"
        :class="item.active === true ? 'active' : ''"
        href="#"
        >{{ item.word }}</a
      >
    </div>
  </div>
</template>



<script setup>
import { ref } from "vue";
const hotWords = ref([
  { word: "电脑", active: true },
  { word: "手记", active: false },
  { word: "裙子", active: false },
  { word: "空调", active: false },
  { word: "裤子", active: false },
]);
</script>

<style scoped lang="less">
@red: #e2231a;
.main {
  height: 140px;
  margin-top: 45px;
  .content {
    width: 550px;
    height: 35px;
    border: 2px solid @red;
    margin-left: 80px; //距左边logo距离
    input {
      width: 485px;
      line-height: 35px;
      height: 35px;
      padding-left: 15px;
    }
    span {
      display: inline-block;
      background-color: @red;
      width: 50px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      color: white;
      font-weight: 700;
      &:hover {
        cursor: pointer;
        background-color: #c81623;
      } //搜索按钮有颜色渐变的效果
    }
    .hotword {
      margin-right: 300px;
      margin-top: 10px;
      a {
        color: #999;
        margin-right: 10px;
        &:hover {
          color: @red;
        }
      }
      .active {
        color: @red;
      }
    }
  }
}
</style>

Element-Plus 简介与安装

npm install element-plus --save

main.js

// 引入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

慕西商城首页头部我的购物车开发

home/ShopCart.vue

<template>
  <div class="main">
    <div class="shopcart">
      <el-badge :value="12" class="item">
        <span class="iconfont icon-gouwuche"></span>
      </el-badge>

      <span>我的购物车</span>
    </div>
  </div>
</template>


<style scoped lang="less">
@red: #e2231a;
.main {
  height: 140px;
  margin-top: 45px;
  margin-left: 20px;
  .shopcart{
    border: 1px solid #e3e4e5;
    width: 130px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    padding-top: 4px;
    .item{
        height: 25px;
        line-height: 25px;
        >span{
            color: @red;
            font-weight: 700;
        }
        
    }
    &:hover{
            cursor: pointer;
            border: 1px solid @red;
        }
    >span{
        margin-left: 20px;
        color: @red;
    }

  }
}
</style>

home/header.vue

<template>
  <div class="main">
    <div class="content">
      <div class="logo fl">
        <Logo></Logo>
      </div>
      <div class="search-box fl">
        <div class="input-search fl">
          <SearchBox></SearchBox>
        </div>
        <div class="shopcart fl">
          <ShopCart></ShopCart>
        </div>
      </div>
      <div class="right fr">
        <img src="@/assets/images/header-right.png" />
      </div>
    </div>
  </div>
</template>