vue实现好看的相册、图片网站

目录

一、效果图

1.项目访问地址

2.画虫官方效果图：

3.作者实现的效果图：

二、代码实现

1.项目结构截图

2.路由配置代码：

3. 头部+底部+主页面内容显示容器的代码

4.首页，即标签页的代码

三、项目启动说明

四、总结

 

---

一、效果图

仿照画虫的标签、摄影师和标签详情图片列表分别写了几个完整的页面，同时搭了整个网站的基础布局框架，仿照还原度1比1来实现，以下分别是画虫官方效果图和作者demo效果图。

1.项目访问地址

作者demo预览：点击访问

官方画虫：点击访问 

 

2.画虫官方效果图：

标签： 

标签图片列表：

 

 摄影师列表：

 

 3.作者实现的效果图：

 

 

二、代码实现

1.项目结构截图

components为登录注册组件窗口，page为网站布局实现，头部+底部+主页面内容显示容器，views存放具体功能页面，router为路由配置。

2.路由配置代码：

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/page/index/index';
Vue.use(Router);


export const constantRoutes = [
    {
      path: '/index',
      component: Layout,
      redirect: '/explore',
      children: [{
        path: 'explore',
        name: '主页',
        component: () =>
          import( /* webpackChunkName: "views" */ '@/views/home/index'),
        children:[
          {
            path: '/explore',
            name: '首页-标签列表',
            component: () => import( '@/views/home/explore/index')
          },
          {
            path: '/photographer',
            name: '首页-摄影师列表',
            component: () => import( '@/views/home/photographer/index')
          }
        ]
      }]
    },
    {
      path: '/',
      name: '主页',
      redirect: '/index'
    },
    {
      path: '/tags',
      component: Layout,
      children: [{
        path: '',
        name: '标签',
        component: () =>
          import( /* webpackChunkName: "views" */ '@/views/tags/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. 头部+底部+主页面内容显示容器的代码

头部代码：

布局整合代码：

4.首页，即标签页的代码

三、项目启动说明

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

npm install

npm run dev

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

四、总结

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

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