当前位置：首页 > article >正文

vue+element-ui简洁完美实现ju动漫网站

article 2025/2/10 5:59:28

一、项目介绍

二、项目截图

1.项目结构图

2.首页

3.日漫

4.更多>排行榜

5.详情页

6.简单登陆页

三、源码实现

1.路由配置

2.首页

四、总结

一、项目介绍

本项目在线预览：点击访问

本项目为vue项目，以动漫为主题来设计元素，简洁美观；

技术要点：vue、路由router、element-ui、vuex、axios等；

二、项目截图

1.项目结构图

开发软件是webstorm，当然vscode、hbuilder等都可以，看自己习惯就行。

2.首页

分为顶部+中间具体页面+底部，组件思想重复利用实现

3.日漫

源码位置截图：

4.更多>排行榜

各个栏目

5.详情页

6.简单登陆页

三、源码实现

项目以组件（顶部、底部）+主布局页面配合路由构思实现，可以通过组件思维重复利用共同的局部页面，简单且美观，也更加利于后期功能页面拓展和维护、修改等。

1.路由配置

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/page/index/index'

Vue.use(Router)

export default new Router({
  // mode: 'history', // 或者是 'hash'
  routes: [
    {
      path: '/',
      name: '主页',
      redirect: '/index'
    },
    {
      path: '/index',
      component: Layout,
      children: [{
        path: '',
        name: '首页',
        component: () =>
          import( /* webpackChunkName: "views" */ '@/views/home/index')
      }]
    },
    {
      path: '/list',
      component: Layout,
      children: [{
        path: '',
        name: '列表',
        component: () =>
          import('@/views/list/index')
      }]
    },
    {
      path: '/ph',
      component: Layout,
      children: [{
        path: '',
        name: '排行榜',
        component: () =>
          import('@/views/ph/ph')
      }]
    },
    {
      path: '/jx',
      component: Layout,
      children: [{
        path: '',
        name: '排行榜-精选',
        component: () =>
          import('@/views/ph/jx')
      }]
    },
    {
      path: '/zx',
      component: Layout,
      children: [{
        path: '',
        name: '排行榜-最近更新',
        component: () =>
          import('@/views/ph/zx')
      }]
    },
    {
      path: '/detail_id/:id',
      component: Layout,
      children: [{
        path: '',
        name: '详情页',
        component: () =>
          import('@/views/dy/details')
      }]
    },
    {
      path: '/watch/:id',
      component: Layout,
      children: [{
        path: '',
        name: '播放页',
        component: () =>
          import('@/views/watch/watch')
      }]
    }, {
      path: '/search',
      component: Layout,
      children: [{
        path: '',
        name: '搜索页',
        component: () =>
          import('@/views/search/search'),
      }]
    },
    {
      path: '/login',
      name: '登录页',
      component: () =>
        import( /* webpackChunkName: "page" */ '@/page/login/index')
    }
  ]
})

2.首页

<template>
  <div class="theme2">
    <top></top>
    <banner></banner>
    <heng-tu></heng-tu>
    <zhuan-ti></zhuan-ti>
    <guo-man></guo-man>
    <ri-man></ri-man>
    <latest></latest>
    <zhi-bo></zhi-bo>
    <link-addr></link-addr>
    <top-back></top-back>
  </div>
</template>

<script>
import top from "../../components/home/top";
import banner from "../../components/home/banner";
import hengTu from "../../components/home/hengtu";
import zhuanTi from "../../components/home/zhuanti";
import guoMan from "../../components/home/guoman";
import riMan from "../../components/home/riman";
import latest from "../../components/home/latest";
import zhiBo from "../../components/home/zhibo";
import linkAddr from "../../components/home/link";
import topBack from "../../components/home/top_back";
export default {
  components: {
    top,
    banner,
    hengTu,
    zhuanTi,
    guoMan,
    riMan,
    latest,
    zhiBo,
    linkAddr,
    topBack
  },
  data() {
    return {

    };
  },
  mounted() {
  },
  methods: {
  }
};
</script>

<style>
.head-more-a:hover>.head-more {
  display: block !important;
}
#body-index{
  content: '';
  display: block;
  width: calc(100% - (-10px)) !important;
}
</style>
<style>
@media (max-width: 767px) {
  .theme1 .head {
    position: relative;
    background-color: #fff
  }

  .theme1 .head a {
    color: #1d2129
  }

  .theme1 .logo2 {
    display: none !important
  }

  .theme1 .logo1 {
    display: block !important
  }

  .theme1 .slid-d .slide-time-bj {
    margin-top: 0
  }
}
</style>