vue实现美观大方的动漫、cos、帖子类型网站
目录
一、先上效果图
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 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,这种思维布局可以层层嵌套下去，只要配合
/home/index.vue 代码实现布局：
三、项目启动说明
项目是传统vue项目，实现需要安装node js，然后依次成功执行
npm install
npm run dev
顺利的话就这么简单，当然，遇到问题，直接call me（私聊作者获取帮助，作者一直在帮助了很多的小伙伴）
四、总结
当然项目还有很多细节，不是一两句话可以简述的。最快的就是拿到源码去动手操作！
第一步暂时到这里，关注作者，及时了解更多好项目！如果你也有好的案例，欢迎分享出来，说不定下一个demo就ta了。
获取源码 或 如需帮助，通过博客后面名片+作者即可！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！