2021-11-30 vue移动端卖座电影项目(四) 当前项目代码

前端OnTheRun

已于 2022-10-26 23:08:51 修改

阅读量644

点赞数

分类专栏： vue项目-卖座电影文章标签： vue.js javascript 前端

于 2021-11-30 07:50:30 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/121623952

版权

本文详述了一个基于Vue.js的移动端卖座电影项目，涵盖src/assets/iconfont、src/components/tabbar.vue、router/index.js等关键组件和配置，通过组件化和路由设计实现电影展示、详情及用户交互功能。

摘要由CSDN通过智能技术生成

文章目录

0.目录和package.json依赖

目录:
在这里插入图片描述

依赖:

  "dependencies": {
    "axios": "^1.1.3",
    "core-js": "^3.6.5",
    "element-ui": "^2.15.10",
    "save": "^2.9.0",
    "store": "^2.0.12",
    "swiper": "^5.4.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.6.2"
  },

1.src/assets/iconfont(文件夹)

2.src/components/tabbar.vue

<template>
<footer>
    <ul>
      <router-link to="/Film" custom v-slot="{navigate,isActive}">
        <li @click="navigate" :class="isActive?'myactive':''">
           <i class="iconfont icon-dianying">热映电影</i>
        </li>
      </router-link>
      <router-link to="/Cinema" custom v-slot="{navigate,isActive}">
        <li @click="navigate" :class="isActive?'myactive':''">
           <i class="iconfont icon-yingyuan">附近影院</i>
        </li>
      </router-link>
      <router-link to="/Center" custom v-slot="{navigate,isActive}">
        <li @click="navigate" :class="isActive?'myactive':''">
           <i class="iconfont icon-yingyuan">个人中心</i>
        </li>
      </router-link>
  </ul>
</footer>
</template>

<script>
export default {
     

};
</script>
<style lang="scss" scoped>

  footer{
     
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.722222rem;
    background