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,这种思维布局可以层层嵌套下去，只要配合 标签使用即可。

 

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

三、项目启动说明

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

npm install

npm run dev

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

四、总结

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

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

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