基于vue2.x实现的即时通讯程序仿微信聊天2开发登录页面

1. 废话不说，先上设计图

image.png

1. 在view 目录下新建pages文件夹，内新建login.vue文件，代码如下：（注意背景图，自己找一个好看的，放在指定的位置）
ps: 先添加路由 
    {
        path: '/login',
        name: 'Login',
        component: () => import('@/views/pages/login'),
        meta: { title: '登录', keepAlive: false }
    }

2. 然后会报错，组件未引入，底部的tabbar我们login页面并不想要，在继续改造一下

image.png

1. 在plugins/vamt.js内引入，我们项目大致会用到的，这里我一并引入
  // 按需全局引入 vant组件
import Vue from 'vue'
import { Button, Icon,NoticeBar,Notify, List, Field, 
Dialog, Cell, CellGroup, Tabbar, Popover, Popup, 
Sticky, TabbarItem, NavBar, Search, Image as VanImage } from 'vant'
Vue.use(Button)
Vue.use(Cell)
Vue.use(List)
Vue.use(Tabbar).use(TabbarItem)
Vue.use(Icon)
Vue.use(NavBar)
Vue.use(Search)
Vue.use(VanImage)
Vue.use(Sticky)
Vue.use(Popover)
Vue.use(Popup)
Vue.use(CellGroup)
Vue.use(Dialog)
Vue.use(Field)
Vue.use(NoticeBar)
Vue.use(Notify)

2. 解决底部tabbar的问题，因为我们有的页面需要tabbar，有的页面不需要，所以我们要动态控制，
在router.config.js内每个路由的meta内新增一个属性showFoot: true，为true就说这个页面需要显示tabbar，反之亦凡。
login页面不需要，所以  meta: { title: '登录', keepAlive: false, showFoot: false } 
首页是需要的 所以 meta: { title: '首页', keepAlive: false, showFoot: true }
光是这么弄是不行，还要改造下 views/layouts/index.vue
    

      
    

3. 最后 注释掉 ,大功告成

//.app-container {
//  padding-bottom: 50px;
//}