Vuetify 照片墙应用

1. 初始化 Vite 项目；
2. 安装 Vuetify 和相关依赖；
3. 配置 Vuetify；
4. 创建主要应用结构，包括侧边抽屉；
5. 创建照片墙组件；
6. 在 App.vue 中整合所有组件。

1. 初始化 Vite 项目

首先，在终端中运行以下命令来创建一个新的 Vite 项目：

npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app
npm install

2. 安装 Vuetify 和相关依赖

接下来，安装 Vuetify 和其他所需的依赖：

npm install vuetify@next vite-plugin-vuetify @mdi/font
npm install sass sass-loader -D

3. 配置. Vuetify

在 vite.config.ts 中配置 Vuetify：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  plugins: [
    vue(),
    vuetify({ autoImport: true })
  ]
})

在 src/main.ts 中引入 Vuetify：

import { createApp } from 'vue'
import App from './App.vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'
import '@mdi/font/css/materialdesignicons.css'

const vuetify = createVuetify({
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        colors: {
          primary: '#1976D2',
          secondary: '#424242',
          accent: '#82B1FF',
          error: '#FF5252',
          info: '#2196F3',
          success: '#4CAF50',
          warning: '#FFC107',
        },
      },
    },
  },
})

const app = createApp(App)
app.use(vuetify)
app.mount('#app')

4. 创建主要应用结构，包括侧边抽屉

在 src/layouts 目录下创建 DefaultLayout.vue：

<template>
  <v-app>
    <v-app-bar app color="primary" dark>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>照片墙应用</v-toolbar-title>
    </v-app-bar>
    <v-navigation-drawer v-model="drawer" app>
      <v-list>
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title class="text-h6">菜单</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-divider></v-divider>
        <v-list-item link>
          <v-list-item-icon>
            <v-icon>mdi-home</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>主页</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item link>
          <v-list-item-icon>
            <v-icon>mdi-image</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>照片墙</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-main>
      <slot></slot>
    </v-main>
    <v-footer app>
      <span class="text-center">© 2024 照片墙应用</span>
    </v-footer>
  </v-app>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const drawer = ref(true)
</script>

5. 创建照片墙组件

在 src/components 目录下创建 PhotoWall.vue 文件：

<template>
  <v-container>
    <v-row>
      <v-col
        v-for="(photo, index) in photos"
        :key="index"
        cols="12"
        md="4"
        >
        <v-card>
          <v-img :src="photo.src" :alt="photo.alt" height="200"></v-img>
          <v-card-title>{{ photo.title }}</v-card-title>
          <v-card-subtitle>{{ photo.description }}</v-card-subtitle>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const photos = ref([
    { src: 'https://via.placeholder.com/200', alt: 'Placeholder Image 1', title: '照片1', description: '描述1' },
    { src: 'https://via.placeholder.com/200', alt: 'Placeholder Image 2', title: '照片2', description: '描述2' },
    { src: 'https://via.placeholder.com/200', alt: 'Placeholder Image 3', title: '照片3', description: '描述3' },
    // 更多照片
  ])
</script>

7. 在 App.vue 中整合所有组件

修改 src/App.vue 文件：

<template>
  <DefaultLayout>
    <PhotoWall />
  </DefaultLayout>
</template>

<script setup lang="ts">
  import DefaultLayout from './layouts/DefaultLayout.vue'
  import PhotoWall from './components/PhotoWall.vue'
</script>

<style>
  @import 'vuetify/styles';
  @import '@mdi/font/css/materialdesignicons.css';
</style>

运行应用，应该能够正确使用 Vuetify，并且包含一个侧边抽屉和照片墙功能。