一、先上效果图

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 supportscrollBehavior: () => ({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了。

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