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了。
获取源码 或 如需帮助，通过博客后面名片+作者即可！
