vue实现美观大方的动漫、cos、帖子类型网站网站首页 技术杂谈

vue实现美观大方的动漫、cos、帖子类型网站

愛芳芳 2023-05-23 08:00:01

简介vue实现美观大方的动漫、cos、帖子类型网站

一、先上效果图

1.项目demo预览：点击预览

参照半次元的榜单-绘画榜、榜单-COS榜、榜单-写作榜、个人中心、登录注册页面，导航栏等，分别实现页面排版、数据交互、基础框架布局搭建以及自定义vue组件合理的封装及使用。在vue项目开发过程中，作者认为很重要的一点就是自定义组件的合理分离封装及使用，这样有利于界面合理排版、合理拆分、合理整合、重复使用、大页面分小页面利于维护等一系列有点。

2.半次元官方截图：

3.项目demo 效果图：

二、代码实现

1.项目结构截图：

、

page为网站布局实现，头部+底部+主页面内容显示容器，views存放具体功能页面，router为路由配置，其中头部有两种样式，所以设计了两个头部页面区分，显示容器根据头部的不同也分为两个，其中逻辑一样，仅仅头部复用的不用而区分。

2.路由配置代码：

import Vue from 'vue'
import Router from 'vue-router'
import LayoutOfHome from '@/page/index/home';
import LayoutOfCommon from '@/page/index/common';
Vue.use(Router);


export const constantRoutes = [
    {
      path: '/index',
      component: LayoutOfHome,
      redirect: '/ranking',
      children: [{
        path: 'ranking',
        name: '主页',
        component: () =>
          import( /* webpackChunkName: "views" */ '@/views/home/index'),
        children:[
          {
            path: '/ranking',
            name: '首页-榜单',
            component: () => import( '@/views/home/ranking/index')
          }
        ]
      }]
    },
    {
      path: '/',
      name: '主页',
      redirect: '/index'
    },
    {
      path: '/login',
      component: LayoutOfCommon,
      children: [{
        path: '',
        name: '登录',
        component: () =>
          import( /* webpackChunkName: "views" */ '@/page/login/index'),
      }]
    },
    {
      path: '/personal',
      component: LayoutOfHome,
      children: [{
        path: '',
        name: '个人中心',
        component: () =>
          import( /* webpackChunkName: "views" */ '@/views/personal/index'),
      }]
    },
  ];

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

3.首页实现

首页轮播图+ 菜单作为首页通用布局（/home/index.vue，看下图），ranking里面的index.vue作为榜单具体功能页面实现，可以看上面路由配置属性理解： component: LayoutOfHome,这种思维布局可以层层嵌套下去，只要配合 <router-view></router-view>标签使用即可。

/home/index.vue 代码实现布局：

<template>
    <div class="rank-index">
      <div class="dm-carousel banner-inner" style="width:1200px;height:250px">
        <div class="slick-slider slick-initialized">
          <div class="slick-list" style="height: 253px;">
            <el-carousel height="253px">
              <el-carousel-item v-for="item in banners" :key="item">
                <el-image :src="item"></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
      <div class="rank-index-navbar">
        <div class="home-navbar">
          <a v-for="(item,index) in menus" :key="index" :class="'home-navbar-item '+(item.path === path?'active':'')" @click="selTab(item)">{{item.name}}</a>
        </div>
      </div>
      <router-view></router-view>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        banners: [
          require('../../../public/img/banner1.jpg'),
          require('../../../public/img/banner2.jpg'),
          require('../../../public/img/banner3.jpg'),
          require('../../../public/img/banner4.jpg'),
          require('../../../public/img/banner5.jpg'),
        ],
        path:'/ranking',
        menus: [
          {name:'推荐',path:'/recommend'},
          {name:'关注',path:'/follow'},
          {name:'榜单',path:'/ranking'},
          {name:'绘画',path:'/draw'},
          {name:'COS',path:'/cos'},
          {name:'小说',path:'/novel'},
          {name:'问答',path:'/QAndA'}
        ]
      };
    },
    mounted() {
      let that = this;
      setInterval(function(){
        that.path = that.$router.currentRoute.path;
      },1000)
    },
    methods: {
      selTab(item){//标签切换
        this.path = item.path;
        this.$router.push({path: item.path});
      },
    }
  };
</script>

<style scoped>
  .rank-index {
    width: 1200px;
    margin: 0 auto;
  }
  .banner-inner {
    background-color: #fff;
    border-radius: 5px;
    margin: 12px auto 0;
    overflow: hidden;
  }
  .dm-carousel {
    position: relative;
  }
  .dm-carousel .slick-slider {
    width: 100%;
    height: 100%;
  }
  .dm-carousel .slick-slider {
    position: relative;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }
  .dm-carousel .slick-slider .slick-list, .dm-carousel .slick-slider .slick-track {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .dm-carousel .slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }

  .rank-index .rank-index-navbar {
    height: 48px;
    margin: 12px auto;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .home-navbar {
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .home-navbar .home-navbar-item:not(:last-child) {
    padding-right: 48px;
  }
  .home-navbar .home-navbar-item {
    display: block;
    font-size: 16px;
    color: #252526;
    cursor: pointer;
    -webkit-transition: color .12s linear;
    transition: color .12s linear;
    line-height: 1.5;
  }
  a {
    text-decoration: none;
    color: #366cd9;
  }
  .home-navbar .home-navbar-item:hover {
    color: #fa4b8b;
  }

  .home-navbar .home-navbar-item.active {
    font-weight: 700;
    color: #fa4b8b;
  }
  .home-navbar .home-navbar-item:hover {
    cursor: pointer;
  }
</style>