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

第四节

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

底部导航

1. 菜单样式为图标和字体的组合，布局使用弹性盒子即可。

2. 图标用到了iconfont，所以将其封装成了本地组件以供使用， 参考：vue中手动封装iconfont组件

3. 点击相应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>
   
   <