App.vue

  • 母版页其实也就是对App.vue这个文件进行修改，用户可以在App.vue中以<router-view></router-view>的方式来切换视图
  • 将App.vue修改成如下形式
<template>
  <!--v-app，有且只有一个-->
  <v-app id="app">
    <!--导航侧栏，clipped属性用于将侧栏置于应用栏下方，drawer用于侧栏的显示和隐藏-->
    <v-navigation-drawer app clipped v-model="drawer">
      <!--左上方的头像、用户名和邮箱的显示-->
      <v-list>
        <v-list-item two-line>
          <!--头像-->
          <v-list-item-avatar>
            <v-img src="./assets/logo.png" alt="头像"></v-img>
          </v-list-item-avatar>
          <!--简介-->
          <v-list-item-content>
            <!--用户名-->
            <v-list-item-title>游客</v-list-item-title>
            <!--邮箱-->
            <v-list-item-subtitle>example@mail.com</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
      <!--一条分割线-->
      <v-divider></v-divider>
      <!--导航列表-->
      <v-list nav dense>
        <!--主页-->
        <v-list-item link>
          <!--mdi图标，home-->
          <v-list-item-icon>
            <v-icon>mdi-home</v-icon>
          </v-list-item-icon>
          <!--文字说明-->
          <v-list-item-title>主页</v-list-item-title>
        </v-list-item>
      </v-list>
      <!--导航侧栏底部插槽-->
      <template v-slot:append>
        <!--登录按钮-->
        <div class="pa-2">
          <v-btn block color="primary">登录</v-btn>
        </div>
        <!--注册按钮-->
        <div class="pa-2">
          <v-btn block color="success">注册</v-btn>
        </div>
        <!--注销按钮，登录成功后才可见-->
        <div class="pa-2">
          <v-btn block color="error">注销</v-btn>
        </div>
      </template>
    </v-navigation-drawer>

    <!--顶部导航栏，clipped-left用于控制导航侧栏在左边-->
    <v-app-bar app clipped-left dense color="blue">
      <!--顶部导航栏左侧的一个小按钮，点击之后会显示或隐藏导航侧栏-->
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" color="white"></v-app-bar-nav-icon>
    </v-app-bar>

    <!--页面主要内容部分，基本上以视图替换的形式体现-->
    <v-main>
      <!--结合v-router，修改index.js文件，可以进行视图的替换-->
      <router-view></router-view>
    </v-main>

    <!--最下方的底部导航栏-->
    <v-bottom-navigation app color="primary">
      <!--gitee源码地址，target属性指定在新标签页打开-->
      <v-btn href="https://gitee.com/kimu" target="_blank">
        <v-icon>mdi-share-variant></v-icon>
      </v-btn>
    </v-bottom-navigation>
  </v-app>
</template>

<script>

export default {
  name: 'App',

  data: () => ({
    // 控制导航侧栏的显示和隐藏
    drawer: true
  })
}
</script>
  • 到这一步为止我们不需要修改其它的任何文件，也不需要添加图片等静态文件
  • 你可能需要在vscode中安装vue相关插件，否则代码写上去就是纯白色，很难辨别
  • 有关vue和vuetify的语法请自行上网搜索
  • 使用命令npm run serve或者直接在vue ui中运行（推荐），运行后页面效果如下
  • 上方的导航栏、左边的导航侧栏，以及下方的底部导航栏是整个项目通用的部分，而中间的页面是通过<router-view></router-view>来进行管理控制的，查看router/index.js中的代码就可以知道，页面打开是默认将 / 映射到Home.vue这个视图上
  • 接下来我们需要对模板页做一个小小的改进，毕竟有些地方显示还是不太合理

Vuex

  • 是用来做全局状态管理的，其实就是跨页面通用的一些信息，一般是用户相关信息
  • 对应着store/index.js文件，将该文件修改成如下形式
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 代表用户自身，最终不一定会以这种方式呈现
    user: {
      id: null,
      username: '',
      password: '',
      enabled: true,
      firstName: '',
      lastName: '',
      gender: 0,
      phone: '',
      email: '',
      icon: '',
      birthday: new Date().toISOString().substr(0, 10),
      joinedDate: new Date().toISOString().substr(0, 10),
      // 和用户相关的一些链接，比如用户自身的描述
      _links: []
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
  • 再对App.vue进行修改成如下形式
<template>
  <!--v-app，有且只有一个-->
  <v-app id="app">
    <!--导航侧栏，clipped属性用于将侧栏置于应用栏下方，drawer用于侧栏的显示和隐藏-->
    <v-navigation-drawer app clipped v-model="drawer">
      <!--左上方的头像、用户名和邮箱的显示-->
      <v-list>
        <v-list-item two-line>
          <!--头像-->
          <v-list-item-avatar>
            <v-img v-if="$store.state.user.icon" :src="$store.state.user.icon" alt="头像"></v-img>
            <v-img v-else src="./assets/logo.png" alt="头像"></v-img>
          </v-list-item-avatar>
          <!--简介-->
          <v-list-item-content>
            <!--用户名-->
            <v-list-item-title>游客</v-list-item-title>
            <!--邮箱-->
            <v-list-item-subtitle>example@mail.com</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
      <!--一条分割线-->
      <v-divider></v-divider>
      <!--导航列表-->
      <v-list nav dense>
        <!--主页-->
        <v-list-item link>
          <!--mdi图标，home-->
          <v-list-item-icon>
            <v-icon>mdi-home</v-icon>
          </v-list-item-icon>
          <!--文字说明-->
          <v-list-item-title>主页</v-list-item-title>
        </v-list-item>
      </v-list>
      <!--导航侧栏底部插槽-->
      <template v-slot:append>
        <!--登录按钮-->
        <div v-if="$store.state.user.username === ''" class="pa-2">
          <v-btn block color="primary">登录</v-btn>
        </div>
        <!--注册按钮-->
        <div v-if="$store.state.user.username === ''" class="pa-2">
          <v-btn block color="success">注册</v-btn>
        </div>
        <!--注销按钮，登录成功后才可见-->
        <div v-if="$store.state.user.username !== ''" class="pa-2">
          <v-btn block color="error">注销</v-btn>
        </div>
      </template>
    </v-navigation-drawer>

    <!--顶部导航栏，clipped-left用于控制导航侧栏在左边-->
    <v-app-bar app clipped-left dense color="blue">
      <!--顶部导航栏左侧的一个小按钮，点击之后会显示或隐藏导航侧栏-->
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" color="white"></v-app-bar-nav-icon>
    </v-app-bar>

    <!--页面主要内容部分，基本上以视图替换的形式体现-->
    <v-main>
      <!--结合v-router，修改index.js文件，可以进行视图的替换-->
      <router-view></router-view>
    </v-main>

    <!--最下方的底部导航栏-->
    <v-bottom-navigation app color="primary">
      <!--gitee源码地址，target属性指定在新标签页打开-->
      <v-btn href="https://gitee.com/kimu" target="_blank">
        <v-icon>mdi-share-variant</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </v-app>
</template>

<script>

export default {
  name: 'App',

  data: () => ({
    // 控制导航侧栏的显示和隐藏
    drawer: true
  })
}
</script>
  • 可以看出修改后和修改前的区别在于对于用户登录状态的鉴定，通过vuex的state我们可以判断一个用户是否处于登录状态，并且这个state并不会因为view的切换而消失（但是刷新页面会重置）
  • 现在的页面效果如下
  • 可以看出左侧导航栏中注销这个按钮不见了，确实对应了用户没有登录的状态

至此，用vuetify写一个简单的模板页已讲解完毕，下一节会讲解如何用vue-axios向后端发送请求以及如何用vuex来进一步管理全局状态