首页 前端知识 vue实现美观大方的动漫、cos、帖子类型网站

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

2024-02-01 12:02:50 前端知识 前端哥 329 775 我要收藏

目录

一、先上效果图

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

2.半次元官方截图:

3.项目demo 效果图:

二、 代码实现

1.项目结构截图:

2.路由配置代码:

3.首页实现

三、项目启动说明

四、总结


一、先上效果图

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>

三、项目启动说明

项目是传统vue项目,实现需要安装node js,然后依次成功执行

npm install

npm run dev

顺利的话就这么简单,当然,遇到问题,直接call me(私聊作者获取帮助,作者一直在帮助了很多的小伙伴)

四、总结

当然项目还有很多细节,不是一两句话可以简述的。最快的就是拿到源码去动手操作!

第一步暂时到这里,关注作者,及时了解更多好项目!如果你也有好的案例,欢迎分享出来,说不定下一个demo就ta了。

获取源码 或 如需帮助,通过博客后面名片+作者即可!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1011.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!