【vue项目实战】Vue工程化项目--猫眼电影移动端（四）

最新推荐文章于 2021-03-11 20:27:33 发布

艾欢欢

最新推荐文章于 2021-03-11 20:27:33 发布

阅读量5.7k

点赞数 12

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue项目实战项目工程化猫眼 vue-cli vue.js

本文链接：https://blog.csdn.net/AiHuanhuan110/article/details/103318660

本文是Vue项目实战系列，详细介绍了猫眼电影移动端的开发过程，涉及Vuex的状态管理，底部导航，主页面逻辑更新，用户登录验证和注册功能。通过Vuex模拟数据库操作，实现登录状态的保存和读取。同时，文章提供了一个完整的项目demo链接供读者参考学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第四节

底部导航
vuex --参考：vuex 使用总结（详解）
登陆验证、用户注册 --这里是使用vuex模拟数据库里的读存操作（结合真实数据库请参考【全栈初体验】Vue+Node+MySQL实现前后端分离开发）
demo地址：第四节
请 结合代码 看以下文字，建议 从第一节看起
这些文章都看完之后，可以看一下猫眼升级版技术栈：vue-cli3 + typescript + axios

底部导航

菜单样式为图标和字体的组合，布局使用弹性盒子即可。
图标用到了iconfont，所以将其封装成了本地组件以供使用，参考：vue中手动封装iconfont组件

点击相应tab，首先要改变状态，然后使用 $emit 跟父组件通信，告诉他我点击了什么按钮。

// 文件路径：src/components/pageFooter.vue
<template>
  <div class="nav">
    <ul class="icon">
      <li @click="changeTab('film')">
        <icon :name="'&#xe6af;'" :iconStyle="activeTab === 'film'? iconStyleActive : iconStyle"></icon>
        <span class="text">电影</span>
      </li>
      <li @click="changeTab('cinema')">
        <icon :name="'&#xe61d;'" :iconStyle="activeTab === 'cinema'? iconStyleActive : iconStyle"></icon>
        <span class="text">影院</span>
      </li>
      <li @click="changeTab('mine')">
        <icon :name="'&#xe615;'" :iconStyle="activeTab === 'mine'? iconStyleActive : iconStyle"></icon>
        <span class="text">我的</span>
      </li>
    </ul>
  </div>
</template>

<script