2020-03-24

庚子鼠年 己卯月 丙寅日

描述

emmmm，今天换了一个移动端框架学习，vux官网不支持vue3.x，百度了好久没解决配置问题，换了一个蚂蚁的ui-vant。

随笔

vant

官方文档：https://youzan.github.io/vant/#/zh-CN/quickstart

tabber 搭建

tabber.vue

<template>
    <div>
      <router-view/>
      <Tabbar
        v-model="active"
        active-color="#07c160"
        inactive-color="#000"
      >
        <TabbarItem icon="home-o" to="left">atd</TabbarItem>
        <TabbarItem icon="search" to="center">教务</TabbarItem>
        <TabbarItem icon="friends-o" to="right">mi</TabbarItem>
      </Tabbar>
    </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant'
export default {
  name: 'tabber',
  components: {
    Tabbar,
    TabbarItem
  },
  data () {
    return {
      active: 1
    }
  }
}
</script>

<style scoped>

</style>

<template>
    <div>right</div>
</template>

<script>
export default {
  name: 'right'
}
</script>

<style scoped>

</style>

<template>
    <div>center</div>
</template>

<script>
export default {
  name: 'center'
}
</script>

<style scoped>

</style>

<template>
    <div>right</div>
</template>

<script>
export default {
  name: 'right'
}
</script>

<style scoped>

</style>

路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from './../views/index'
import Test from './../views/test'
import Letf from './../components/left'
import Center from './../components/center'
import Right from './../components/right'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Index,
    name: '主页',
    children: [
      { path: 'left', component: Letf, name: 'atd' },
      { path: 'center', component: Center, name: '教务' },
      { path: 'right', component: Right, name: 'mi' }
    ]
  },
  { path: '/test', component: Test, name: '测试页面' }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router