vuetify3入门实战：做简单的相册

---

这是使用vuetify3可以开发的一个简单的相册，通过菜单可以控制相册以彩色或者黑白方式显示。
在这个例子中，我们主要使用 抽屉式导航（Navigation drawers） 做导航，使用栅格（Grids）显示相册图片。

在整个过程中，我们可以直接使用vuetify3的各种控件，几乎不用写css。

vuetify3 gallery demo

新建项目

可以使用上一篇文章：用最快捷的方法创建vuetify3项目 的方法新建项目。

制作菜单控件

可以在 veutify官网 选择一款抽屉式导航（Navigation drawers）控件，在这里可以直接查看实际效果，也可以直接把代码拷贝出来使用。

vuetify官网的组件部分有大量控件，我想绝大部分应用使用这些控件拼凑就足够酷了。

在项目的 components 文件夹中新建文件 SideBar.vue，然后把从官网拷贝的代码粘贴过来，修改一下，菜单控件就做好了。
下面是SideBar.vue的代码：

<template>
  <v-navigation-drawer expand-on-hover rail>
    <v-list>
      <v-list-item
        prepend-avatar="https://randomuser.me/api/portraits/men/85.jpg"
        subtitle="liupras@gmailcom"
        title="火云"
      ></v-list-item>
    </v-list>

    <v-divider></v-divider>

    <v-list density="compact" nav>
      <v-list-item
        prepend-icon="mdi-image"
        title="彩色"
        value="color gallery"
        @click="selectOption(true)"
      ></v-list-item>
      <v-list-item
        prepend-icon="mdi-dialpad"
        title="黑白"
        value="gray gallery"
        @click="selectOption(false)"
      ></v-list-item>