03 主页框架

• 前言
• 开工
• • 引用iconfont字体图标
  • template代码
  • style代码
  • 页面展示
• 路由局部跳转
• • script代码
• 总结

前言

• 上一章我们实现了基础的主题切换功能，这一章我们开始搭建主页主要框架，并测试一下我们的切换主题功能。

开工

引用iconfont字体图标

• 这里我们使用font-class方法引用iconfont字体图标。
• 在项目目录的src\assets\icons中创建iconfont.css文件。
• 首先我们将选中的图标放入项目，点击标红部分，如下图：
  
• 在弹出的页面中将代码复制进刚刚创建的iconfont.css文件中，代码如下：

@font-face {font-family: "iconfont"; /* Project id 3990496 */src: url('//at.alicdn.com/t/c/font_3990496_c7efy0697zw.woff2?t=1684920260831') format('woff2'),url('//at.alicdn.com/t/c/font_3990496_c7efy0697zw.woff?t=1684920260831') format('woff'),url('//at.alicdn.com/t/c/font_3990496_c7efy0697zw.ttf?t=1684920260831') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-wode:before {content: "\e74d";
}.icon-zhuye:before {content: "\e63b";
}.icon-xiaoxi1:before {content: "\e741";
}.icon-sousou:before {content: "\e63a";
}.icon-qq:before {content: "\e600";
}.icon-weixin:before {content: "\e665";
}.icon-guanbi:before {content: "\e6c1";
}

• main.js文件中引用，这样就可以全局使用啦。

import '@/assets/icons/iconfont.css'

• 使用方法如下：

<i class="iconfont icon-sousou"></i>

template代码

• 这里我的思路是主框架分为上下两部分。
• 上为头部，使用绝对定位置于最上层。
• 下为主要内容，分为左右两部分，左边为导航栏，右边为路由页面展示部分。
• 主框架思路：

  <div class="container"><div class="header"></div><div class="main"><div class="nav"></div><div class="content"></div></div></div>

• 头部为左中右布局，左边logo，中间搜索框，右边留几个按钮，如下：

	<div class="header"><img class="logo" src="@/assets/icons/logo.png"><div class="search-box"><input placeholder="搜索"><div class="search-icon"><i class="iconfont icon-guanbi"></i><i class="iconfont icon-sousou"></i></div></div><div class="right"><button @click="switchTheme('default')">极简白</button><button @click="switchTheme('dark')">暗夜黑</button><button>打赏</button><button>关于我们</button></div></div>

• 导航栏部分如下：

      <div class="nav"><div class="nav-item" :class="communityState" @click="routerPush('community')"><i class="iconfont icon-zhuye"></i><div>社区</div></div><div class="nav-item" :class="chatState" @click="routerPush('chat')"><i class="iconfont icon-xiaoxi1"></i><div>聊天</div></div><div class="nav-item" :class="userState" @click="routerPush('user')"><i class="iconfont icon-wode"></i><div>我的</div></div></div>

• 主内容即路由内容部分使用左右路由页面占位。
• 主内容部分如下：

      <div class="content"><router-view></router-view></div>

style代码

.container {height: 100%;width: 86%;margin: 0 auto;
}.header {padding-top: 1rem;display: flex;align-items: center;justify-content: space-between;position: fixed;width: 86%;margin: 0 auto;background-color: @backgroundColor;.logo {height: 3rem;}.search-box {background-color: @boxBackgroundColor;width: 30rem;border-radius: 2rem;position: fixed;left: 50%;transform: translate(-50%);padding: 0 1rem;display: flex;align-items: center;justify-content: space-between;input {background-color: @boxBackgroundColor;flex: 1;border: none;outline: none;font-size: @textSize2;color: @primaryText;width: auto;line-height: 2.4rem;}.search-icon{display: flex;i {color: @secondary;padding: 0 0.6rem;cursor: pointer;}}}.right {display: flex;button {padding: 0.5rem 1.2rem;border: none;border-radius: 2rem;background-color: transparent;font-size: @textSize2;color: @primaryText;cursor: pointer;}button:hover{background-color: @boxBackgroundColor;}}
}.main {padding-top: 5.6rem;display: flex;height: 100%;box-sizing: border-box;
}.nav {flex: 1;.nav-item {display: flex;align-items: center;font-size: @textSize2;color: @primaryText;font-weight: 600;padding: 0.8rem 1rem;margin-bottom: 0.5rem;border-radius: 2rem;cursor: pointer;i{font-size: 1.5rem;}div {margin-left: 0.8rem;}}.selected{background-color: @boxBackgroundColor;}.nav-item:hover{background-color: @boxBackgroundColor;}
}.content {flex: 5;padding-left: 2rem;overflow-y: scroll;scrollbar-width: none;-ms-overflow-style: none;
}
.content::-webkit-scrollbar{display: none;
}
.content::-moz-scrollbar{display: none;
}

页面展示

路由局部跳转

• 在项目目录的src\components目录中新建如下三个vue文件：

//community.vue
<template><div>社区</div>
</template>//chat.vue
<template><div>聊天</div>
</template>//user.vue
<template><div>我的</div>
</template>

• 路由配置，在router/index.js添加如下配置：
• 其中，主路由页面是index.vue，该路由有三个子路由。

{path: '/',name: 'Index',component: () => import('../views/index'),children: [{path: '/user',name: 'User',component: () => import('../components/user')},{path: '/community',name: 'Community',component: () => import('../components/community')},{path: '/chat',name: 'Chat',component: () => import('../components/chat')}]},

script代码

• js代码这里主要实现了头部的两个皮肤切换，以及导航栏的路由局部刷新功能，如下：

<script setup>
import { setTheme } from '@/theme/theme'
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
const router = useRouter()
const userState = ref('noSelected')
const communityState = ref('noSelected')
const chatState = ref('noSelected')
onMounted(() => {routerPush('community')
})
const switchTheme = (theme) => {setTheme(theme)
}
const routerPush = (path) => {router.push(path)communityState.value = 'noSelected'chatState.value = 'noSelected'userState.value = 'noSelected'switch (path) {case 'community':communityState.value = 'selected'breakcase 'chat':chatState.value = 'selected'breakcase 'user':userState.value = 'selected'breakdefault:communityState.value = 'selected'}
}
</script>

总结

• 至此，主页框架就基本完成了，上述的一些功能也可以正常使用，录制gif有点麻烦这里就没有展示，后面会不断完善细节。小伙伴们可以将自己的意见反馈发表到评论区，有合作想法的铁子欢迎私聊。。。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！