vue结合vant做一个基础的移动端页面

实现效果：

一个顶部导航，一个底部tabbar，切换页面时候顶部导航标题跟着切换。

具体实现：

创建vue项目
cmd下创建项目，这里用的是Vue2

vue create 项目名

安装vant

npm i vant -S

全局引入：
main.js:

import Vant from 'vant';
new Vue({
  router,
  store,
  Vant,
  render: (h) => h(App),
}).$mount("#app");

app.vue页面中加入上下导航：

<template>
  <div id="app">
<van-nav-bar
  :title="title"
  left-text="返回"
  left-arrow
  fixed="true"
  placeholder="true"
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>
    <router-view />
        <van-tabbar route @change="onChange">
      <van-tabbar-item to="/" icon="home-o" name="首页">首页</van-tabbar-item>
      <van-tabbar-item to="/about" icon="search" name="分类">分类</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Notify } from 'vant';
export default {
  data(){
    return{
      title:'首页'
    }
  },
  methods: {
    onClickLeft() {
      console.log(123);
      this.$router.go(-1);
    },
    onClickRight() {
      Toast('按钮');
    },
    onChange(name) {
        console.log(name)
        this.title = name
    },
  },
};

</script>
<style>

</style>