第一版

vuetify-project/.browserslistrc

+> 1%
+last 2 versions
+not dead
+not ie 11

vuetify-project/.editorconfig

+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

vuetify-project/.gitignore

+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

vuetify-project/README.md

+# Vuetify (Default)
+
+This is the official scaffolding tool for Vuetify, designed to give you a head start in building your new Vuetify application. It sets up a base template with all the necessary configurations and standard directory structure, enabling you to begin development without the hassle of setting up the project from scratch.
+
+## ❗️ Important Links
+
+- 📄 [Docs](https://vuetifyjs.com/)
+- 🚨 [Issues](https://issues.vuetifyjs.com/)
+- 🏬 [Store](https://store.vuetifyjs.com/)
+- 🎮 [Playground](https://play.vuetifyjs.com/)
+- 💬 [Discord](https://community.vuetifyjs.com)
+
+## 💿 Install
+
+Set up your project using your preferred package manager. Use the corresponding command to install the dependencies:
+
+| Package Manager                                                | Command        |
+|---------------------------------------------------------------|----------------|
+| [yarn](https://yarnpkg.com/getting-started)                   | `yarn install` |
+| [npm](https://docs.npmjs.com/cli/v7/commands/npm-install)     | `npm install`  |
+| [pnpm](https://pnpm.io/installation)                          | `pnpm install` |
+| [bun](https://bun.sh/#getting-started)                        | `bun install`  |
+
+After completing the installation, your environment is ready for Vuetify development.
+
+## ✨ Features
+
+- 🖼️ **Optimized Front-End Stack**: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. [Vue 3](https://v3.vuejs.org/) | [Vuetify 3](https://vuetifyjs.com/en/)
+- 🗃️ **State Management**: Integrated with [Pinia](https://pinia.vuejs.org/), the intuitive, modular state management solution for Vue.
+- 🚦 **Routing and Layouts**: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts for organizing Vue file layouts. [Vue Router](https://router.vuejs.org/) | [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)
+- ⚡ **Next-Gen Tooling**: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). [Vite](https://vitejs.dev/)
+- 🧩 **Automated Component Importing**: Streamline your workflow with unplugin-vue-components, automatically importing components as you use them. [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
+
+These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable.
+
+## 💡 Usage
+
+This section covers how to start the development server and build your project for production.
+
+### Starting the Development Server
+
+To start the development server with hot-reload, run the following command. The server will be accessible at [http://localhost:3000](http://localhost:3000):
+
+```bash
+yarn dev
+```
+
+(Repeat for npm, pnpm, and bun with respective commands.)
+
+> NODE_OPTIONS='--no-warnings' is added to suppress the JSON import warnings that happen as part of the Vuetify import mapping. If you are on Node [v21.3.0](https://nodejs.org/en/blog/release/v21.3.0) or higher, you can change this to NODE_OPTIONS='--disable-warning=5401'. If you don't mind the warning, you can remove this from your package.json dev script.
+
+### Building for Production
+
+To build your project for production, use:
+
+```bash
+yarn build
+```
+
+(Repeat for npm, pnpm, and bun with respective commands.)
+
+Once the build process is completed, your application will be ready for deployment in a production environment.
+
+## 💪 Support Vuetify Development
+
+This project is built with [Vuetify](https://vuetifyjs.com/en/), a UI Library with a comprehensive collection of Vue components. Vuetify is an MIT licensed Open Source project that has been made possible due to the generous contributions by our [sponsors and backers](https://vuetifyjs.com/introduction/sponsors-and-backers/). If you are interested in supporting this project, please consider:
+
+- [Requesting Enterprise Support](https://support.vuetifyjs.com/)
+- [Sponsoring John on Github](https://github.com/users/johnleider/sponsorship)
+- [Sponsoring Kael on Github](https://github.com/users/kaelwd/sponsorship)
+- [Supporting the team on Open Collective](https://opencollective.com/vuetify)
+- [Becoming a sponsor on Patreon](https://www.patreon.com/vuetify)
+- [Becoming a subscriber on Tidelift](https://tidelift.com/subscription/npm/vuetify)
+- [Making a one-time donation with Paypal](https://paypal.me/vuetify)
+
+## 📑 License
+[MIT](http://opensource.org/licenses/MIT)
+
+Copyright (c) 2016-present Vuetify, LLC

vuetify-project/audit.html

+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>审核详情</title>
+  <style>
+    html,body,#app{
+      height: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="src/components/audit.js"></script>
+</body>
+
+</html>

vuetify-project/game_detail.html

+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>审核</title>
+  <style>
+    html,body,#app{
+      height: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="src/components/game_detail.js"></script>
+</body>
+
+</html>

vuetify-project/gamemanage.html

+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>发起比赛</title>
+  <style>
+    html,body,#app{
+      height: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="src/gamemanage.js"></script>
+</body>
+
+</html>

vuetify-project/home.html

+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>首页</title>
+  <style>
+    html,body,#app{
+      height: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="src/home.js"></script>
+</body>
+
+</html>

vuetify-project/index.html

+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>南高乒乓球俱乐部</title>
+  <style>
+    html,body,#app{
+      height: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="src/login.js"></script>
+</body>
+
+</html>

vuetify-project/jsconfig.json

+{
+  "compilerOptions": {
+    "allowJs": true,
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

vuetify-project/main.html

+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>南高乒乓球俱乐部</title>
+  <style>
+    html,body,#app{
+      height: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="src/main.js"></script>
+</body>
+
+</html>

vuetify-project/package.json

+{
+  "name": "vuetify-project",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "cross-env NODE_OPTIONS='--no-warnings' vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@mdi/font": "7.0.96",
+    "roboto-fontface": "*",
+    "vue": "^3.3.0",
+    "vuetify": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.5.0",
+    "cross-env": "^7.0.3",
+    "sass": "^1.69.0",
+    "unplugin-fonts": "^1.1.0",
+    "unplugin-vue-components": "^0.26.0",
+    "vite": "^5.0.0",
+    "vite-plugin-vuetify": "^2.0.0"
+  }
+}

vuetify-project/space.html

+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>个人空间</title>
+  <style>
+    html,body,#app{
+      height: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="src/space.js"></script>
+</body>
+
+</html>

vuetify-project/src/assets/logo.svg

+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
+<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
+<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
+<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
+</svg>

vuetify-project/src/components/README.md

+# Components
+
+Vue template files in this folder are automatically imported.
+
+## 🚀 Usage
+
+Importing is handled by [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components). This plugin automatically imports `.vue` files created in the `src/components` directory, and registers them as global components. This means that you can use any component in your application without having to manually import it.
+
+The following example assumes a component located at `src/components/MyComponent.vue`:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
+```
+
+When your template is rendered, the component's import will automatically be inlined, which renders to this:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import MyComponent from '@/components/MyComponent.vue'
+</script>
+```

vuetify-project/src/components/audit.js

+/**
+ * main.js
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './audit.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')

vuetify-project/src/components/audit.vue

+<template>
+  <v-app>
+    <v-data-table :headers="headers" :items="matches" item-key="id" :search="search" :items-per-page="10">
+      <template v-slot:top>
+        <v-toolbar flat>
+          <v-toolbar-title>比赛</v-toolbar-title>
+          <v-divider class="mx-4" inset vertical></v-divider>
+          <v-spacer></v-spacer>
+          <v-text-field v-model="search" append-icon="mdi-magnify" label="搜索" single-line hide-details></v-text-field>
+        </v-toolbar>
+      </template>
+      <template v-slot:item.team="{ item }">
+        {{ item.homeTeam }} VS {{ item.awayTeam }}
+      </template>
+      <template v-slot:item.score="{ item }">
+        {{ item.homeScore }} - {{ item.awayScore }}
+      </template>
+      <template v-slot:item.actions="{ item }">
+        <v-icon small @click="approveMatch(item)" style="padding-right: 20px;">mdi-check</v-icon>
+        <v-icon small @click="rejectMatch(item)" style="padding-left: 20px;">mdi-close</v-icon>
+      </template>
+    </v-data-table>
+  </v-app>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      search: '',
+      headers: [
+        { title: '比赛', key: 'team' },
+        { title: '比分', key: 'score' },
+        { title: '审核', key: 'actions', sortable: false }
+      ],
+      matches: [
+        { id: 1, homeTeam: 'Team A', awayTeam: 'Team B', homeScore: 2, awayScore: 1, status: 'pending' },
+        { id: 2, homeTeam: 'Team C', awayTeam: 'Team D', homeScore: 0, awayScore: 3, status: 'pending' },
+        { id: 3, homeTeam: 'Team E', awayTeam: 'Team F', homeScore: 2, awayScore: 2, status: 'pending' },
+      ]
+    };
+  },
+  methods: {
+    approveMatch(match) {
+      // Perform approval logic
+      match.status = 'approved';
+    },
+    rejectMatch(match) {
+      // Perform rejection logic
+      match.status = 'rejected';
+    }
+  }
+};
+</script>
\ No newline at end of file

vuetify-project/src/components/game_detail.js

+/**
+ * main.js
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './game_detail.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')

vuetify-project/src/components/game_detail.vue

+<template>
+    <v-app>
+        <v-data-table :headers="headers" :items="matches" item-key="id" :search="search" :items-per-page="10">
+            <template v-slot:top>
+                <v-toolbar flat>
+                    <v-toolbar-title>比赛</v-toolbar-title>
+                    <v-divider class="mx-4" inset vertical></v-divider>
+                    <v-spacer></v-spacer>
+                    <v-text-field v-model="search" append-icon="mdi-magnify" label="搜索" single-line
+                        hide-details></v-text-field>
+                </v-toolbar>
+            </template>
+            <template v-slot:item.name="{ item }">
+                {{ item.username }} VS {{ item.opponentname }}
+            </template>
+            <template v-slot:item.score="{ item }">
+                {{ item.userScore }} - {{ item.opponentScore }}
+            </template>
+            <template v-slot:item.verified="{ item }">
+                <v-icon :color="item.verified != 1 ? (item.verified == 2 ? 'green' : 'red') : 'red'">{{ item.verified ?
+            'mdi-check-circle' :
+                    'mdi-close-circle' }}</v-icon>
+            </template>
+        </v-data-table>
+    </v-app>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { reactive } from 'vue';
+const search = ref('');
+const headers = reactive([
+    { title: '比赛', key: 'name' },
+    { title: '比分', key: 'score' },
+    { title: '审核状态', key: 'verified' },
+]);
+const matches = reactive([
+    { id: 1, username: 'Team A', opponentname: 'Team B', userScore: 3, opponentScore: 2, verified: true },
+    { id: 2, username: 'Team A', opponentname: 'Team C', userScore: 1, opponentScore: 1, verified: false },
+    { id: 3, username: 'Team A', opponentname: 'Team D', userScore: 2, opponentScore: 4, verified: true },
+]);
+
+</script>
\ No newline at end of file

vuetify-project/src/components/gamemanage.vue

+<template>
+  <v-container>
+    <v-row no-gutters>
+      <v-col align-self="center">
+        <v-autocomplete v-model="player1" hide-details="auto" label="姓名"
+          :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"></v-autocomplete>
+      </v-col>
+      <v-col cols="2" align-self="center">
+        <div class="text-h6" style="text-align: center;">VS</div>
+      </v-col>
+      <v-col align-self="center">
+        <v-autocomplete v-model="player2" hide-details="auto" label="姓名"
+          :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"></v-autocomplete>
+      </v-col>
+    </v-row>
+  </v-container>
+  <v-container>
+    <v-row no-gutters>
+      <v-col align-self="center">
+        <v-autocomplete v-model="score1" hide-details="auto" label="得分"
+          :items="['0', '1', '2', '3', '4', '5']"></v-autocomplete>
+      </v-col>
+      <v-col cols="2" align-self="center">
+        <div class="text-h6" style="text-align: center;">:</div>
+      </v-col>
+      <v-col align-self="center">
+        <v-autocomplete v-model="score2" hide-details="auto" label="得分"
+          :items="['0', '1', '2', '3', '4', '5']"></v-autocomplete>
+      </v-col>
+    </v-row>
+  </v-container>
+  <v-btn :disabled="loading" :loading="loading" class="text-none mb-4" color="indigo-darken-3" size="x-large"
+    variant="flat" block @click="loading = !loading">
+    提交
+  </v-btn>
+
+  <div>
+    <v-card
+    class="mx-auto my-8"
+    href="../../game_detail.html"
+    max-width="344"
+    rel="noopener"
+    target="_blank"
+    title="审核详情"
+    append-icon="mdi-chevron-right"
+  ></v-card>
+  <v-card
+    class="mx-auto my-8"
+    href="../../audit.html"
+    max-width="344"
+    rel="noopener"
+    target="_blank"
+    title="审核"
+    append-icon="mdi-chevron-right"
+  ></v-card>
+  </div>
+
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// import { reactive } from 'vue';
+
+const player1 = ref(null);
+const player2 = ref(null);
+const score1 = ref(null);
+const score2 = ref(null);
+const loading = ref(false);
+
+
+
+</script>

vuetify-project/src/components/home.vue

+<template>
+  <v-card style="height: 200px;width: 95%;margin: auto;">
+    <v-carousel :show-arrows="false" style="height: 100%;width: 100%;" cycle interval="2000" hide-delimiter-background>
+      <v-carousel-item v-for="(item, i) in items" :key="i" cover>
+        <img :src="item.src" class="tupian">
+      </v-carousel-item>
+    </v-carousel>
+  </v-card>
+  <div class="relative1">
+    <h class="text-h6">近期比赛</h>
+    <h class="text-h6 float-right">更多</h>
+    <v-divider thickness="3px"></v-divider>
+    <v-card class="card1">
+      <div class="text-h6" style="height: 33px;" v-for="(thing, index) in things" :key="index">
+        <div class="float-left zhibiao1">
+          {{ thing.username }}
+        </div>
+        <div class="float-left zhibiao2">
+          {{ thing.score1 }}
+        </div>
+        <div class="float-left">
+          :
+        </div>
+        <div class="float-left zhibiao2">
+          {{ thing.score2 }}
+        </div>
+        <div class="float-left zhibiao1">
+          {{ thing.username1 }}
+        </div>
+        <div class="float-right" style="line-height: 32px;">
+          <v-icon>mdi-chevron-right</v-icon>
+        </div>
+        <br>
+      </div>
+    </v-card>
+  </div>
+  <div class="relative1">
+    <h class="text-h6">队员榜单</h>
+    <h class="text-h6 float-right">更多</h>
+    <v-divider thickness="3px"></v-divider>
+    <v-card class="card1">
+      <div class="text-h6" style="height: 33px;" v-for="(thing, index) in things" :key="index">
+        <div class="float-left">
+          {{ thing.number }} {{ thing.username }}
+        </div>
+        <div class="float-left zhibiao3">
+          {{ thing.level }}级
+        </div>
+        <div class="float-left zhibiao4">
+          {{ thing.point }}分
+        </div>
+        <div class="float-right" style="line-height: 32px;">
+          <v-icon>mdi-chevron-right</v-icon>
+        </div>
+        <br>
+      </div>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { reactive } from 'vue';
+
+const items = reactive([
+  {
+    src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
+  },
+  {
+    src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
+  },
+  {
+    src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
+  },
+  {
+    src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
+  },
+]
+);
+
+const things = reactive([
+  {
+    username: 'User1',
+    score1: 10,
+    score2: 5,
+    username1: 'User2',
+    extraInfo: 'adas',
+    number: '1.',
+    level: 'A',
+    point: 4
+  },
+  {
+    username: 'User3',
+    score1: 8,
+    score2: 3,
+    username1: 'User4',
+    extraInfo: 'adas',
+    number: '2.',
+    level: 'A',
+    point: 8
+  }
+]
+);
+
+
+</script>
+
+<style>
+.tupian {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.relative1 {
+  /* margin-left: 20px; */
+  margin: auto;
+  width: 95%;
+  margin-top: 10px;
+  /* margin-right: 20px; */
+}
+
+.card1 {
+  margin-top: 4px;
+}
+
+.zhibiao1 {
+  width: 25%;
+  text-align: center;
+}
+
+.zhibiao2 {
+  width: 10%;
+  text-align: center;
+}
+
+.zhibiao3 {
+  width: 20%;
+  text-align: center;
+}
+
+.zhibiao4 {
+  width: 20%;
+  /* text-align: center; */
+}
+</style>
\ No newline at end of file

vuetify-project/src/components/login_comp.vue

+<template>
+      <v-form
+        ref="form"
+        v-model="isValid"
+        class="pa-4 pt-6"
+      >
+        <v-text-field
+          v-model="usrname"
+          variant="filled"
+          :rules="[rules.usrname]"
+          color="pink"
+          label="用户名"
+        ></v-text-field>
+        <v-text-field
+          v-model="password"
+          variant="filled"
+          :rules="[rules.password]"
+          color="pink"
+          label="密码"
+          type="password"
+        ></v-text-field>
+
+        <!--
+          :rules="[rules.password]"
+          counter="6"
+            style="min-height: 96px"
+            <v-text-field
+          v-model="email"
+          :rules="[rules.email]"
+          variant="filled"
+          color="deep-purple"
+          label="Email address"
+          type="email"
+        ></v-text-field> -->
+        <!-- <v-textarea
+          v-model="bio"
+          auto-grow
+          variant="filled"
+          color="deep-purple"
+          label="Bio"
+          rows="1"
+        ></v-textarea> -->
+
+      </v-form>
+      <!-- <v-divider></v-divider> -->
+      <v-card-actions>
+        <v-btn
+        :disabled="!isValid"
+        :loading="loading"
+        block
+        class="text-none mb-4"
+        color="pink"
+        size="x-large"
+        variant="flat"
+        @click="loading = !loading"
+      >
+        登录
+      </v-btn>
+        <!-- <v-btn
+          variant="text"
+          @click="form.reset()"
+        >
+          Clear
+        </v-btn>
+        <v-spacer></v-spacer>
+        <v-btn
+          :disabled="!isValid"
+          :loading="isLoading"
+          color="deep-purple-accent-4"
+        >
+          Submit
+        </v-btn> -->
+      </v-card-actions>
+      <!-- <v-dialog
+        v-model="dialog"
+        max-width="400"
+        persistent
+      >
+        <v-card>
+          <v-card-title class="text-h5 bg-grey-lighten-3">
+            Legal
+          </v-card-title>
+          <v-card-text>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          </v-card-text>
+          <v-divider></v-divider>
+          <v-card-actions>
+            <v-btn
+              variant="text"
+              @click="agreement = false, dialog = false"
+            >
+              No
+            </v-btn>
+            <v-spacer></v-spacer>
+            <v-btn
+              color="deep-purple"
+              variant="tonal"
+              @click="agreement = true, dialog = false"
+            >
+              Yes
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog> -->
+
+  </template>
+  <script setup>
+    import { ref } from 'vue';
+    import { reactive } from 'vue';
+
+    const form = ref(null)
+    const rules = reactive({
+          email: v => !!(v || '').match(/@/) || 'Please enter a valid email',
+          length: len => v => (v || '').length >= len || `Invalid character length, required ${len}`,
+          usrname:v => !!v || '用户名不能为空',
+          password:v => !!v || '密码不能为空',
+          // password: v => !!(v || '').match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*(_|[^\w])).+$/) ||
+          //   'Password must contain an upper case letter, a numeric character, and a special character',
+          required: v => !!v || 'This field is required',
+        });
+    const usrname = ref(null);
+    const password = ref(null);
+    const isValid = ref(false);
+    const isLoading = ref(false);
+    const loading = ref(false);
+
+
+    // export default {
+    //   data: () => ({
+    //     agreement: false,
+    //     bio: 'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts',
+    //     dialog: false,
+    //     email: undefined,
+    //     isValid: false,
+    //     isLoading: false,
+    //     password: undefined,
+    //     phone: undefined,
+        // rules: {
+        //   email: v => !!(v || '').match(/@/) || 'Please enter a valid email',
+        //   length: len => v => (v || '').length >= len || `Invalid character length, required ${len}`,
+        //   password: v => !!(v || '').match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*(_|[^\w])).+$/) ||
+        //     'Password must contain an upper case letter, a numeric character, and a special character',
+        //   required: v => !!v || 'This field is required',
+        // },
+    //   }),
+    // }
+  </script>
\ No newline at end of file

vuetify-project/src/components/register_comp.vue

+<template>
+      <v-form
+        ref="form"
+        v-model="isValid"
+        class="pa-4 pt-6"
+      >
+        <v-text-field
+          v-model="usrname"
+          variant="filled"
+          :rules="[rules.usrname]"
+          color="pink"
+          label="用户名"
+        ></v-text-field>
+        <v-text-field
+          v-model="password"
+          variant="filled"
+          :rules="[rules.password]"
+          color="pink"
+          label="密码"
+          type="password"
+        ></v-text-field>
+        <v-text-field
+          v-model="confirmpassword"
+          variant="filled"
+          :rules="[rules.confirmpassword]"
+          color="pink"
+          label="确认密码"
+          type="password"
+        ></v-text-field>
+
+
+
+        <!--
+          :rules="[rules.password]"
+          counter="6"
+            style="min-height: 96px"
+            <v-text-field
+          v-model="email"
+          :rules="[rules.email]"
+          variant="filled"
+          color="deep-purple"
+          label="Email address"
+          type="email"
+        ></v-text-field> -->
+        <!-- <v-textarea
+          v-model="bio"
+          auto-grow
+          variant="filled"
+          color="deep-purple"
+          label="Bio"
+          rows="1"
+        ></v-textarea> -->
+
+      </v-form>
+      <v-card-actions>
+        <v-btn
+        :disabled="!isValid"
+        :loading="loading"
+        block
+        class="text-none mb-4"
+        color="pink"
+        size="x-large"
+        variant="flat"
+        @click="loading = !loading"
+      >
+        注册
+      </v-btn>
+        <!-- <v-btn
+          variant="text"
+          @click="form.reset()"
+        >
+          Clear
+        </v-btn>
+        <v-spacer></v-spacer>
+        <v-btn
+          :disabled="!isValid"
+          :loading="isLoading"
+          color="deep-purple-accent-4"
+        >
+          Submit
+        </v-btn> -->
+      </v-card-actions>
+  </template>
+  <script setup>
+    import { ref } from 'vue';
+    import { reactive } from 'vue';
+
+    const form = ref(null)
+    const rules = reactive({
+          email: v => !!(v || '').match(/@/) || 'Please enter a valid email',
+          length: len => v => (v || '').length >= len || `Invalid character length, required ${len}`,
+          usrname:v => !!v || '用户名不能为空',
+          confirmpassword:v => v === password.value || '密码不匹配',
+          password:v => !!v || '密码不能为空',
+          // password: v => !!(v || '').match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*(_|[^\w])).+$/) ||
+          //   'Password must contain an upper case letter, a numeric character, and a special character',
+          required: v => !!v || 'This field is required',
+        });
+    const usrname = ref(null);
+    const password = ref(null);
+    const confirmpassword = ref(null);
+    const isValid = ref(false);
+    const isLoading = ref(false);
+    const loading = ref(false);
+
+
+    // export default {
+    //   data: () => ({
+    //     agreement: false,
+    //     bio: 'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts',
+    //     dialog: false,
+    //     email: undefined,
+    //     isValid: false,
+    //     isLoading: false,
+    //     password: undefined,
+    //     phone: undefined,
+        // rules: {
+        //   email: v => !!(v || '').match(/@/) || 'Please enter a valid email',
+        //   length: len => v => (v || '').length >= len || `Invalid character length, required ${len}`,
+        //   password: v => !!(v || '').match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*(_|[^\w])).+$/) ||
+        //     'Password must contain an upper case letter, a numeric character, and a special character',
+        //   required: v => !!v || 'This field is required',
+        // },
+    //   }),
+    // }
+  </script>
\ No newline at end of file

vuetify-project/src/components/space.vue

+<template>
+  <div class="background">
+    <img src="../assets/背景.jpg" class="img1"></img>
+    <!-- <v-overlay activator="parent" /> -->
+  </div>
+  <!-- <v-overlay activator=".img1" /> -->
+  <!-- <v-container class="relative"> -->
+  <div class="yuanjiao">
+    <div class="relative">
+      <!-- 头像 -->
+      <v-menu rounded>
+        <template v-slot:activator="{ props }">
+          <v-btn icon v-bind="props" class="float-left" size="80px">
+            <v-avatar size="80px" style="border:3px solid white">
+              <img src="../assets/头像.jpg" class="img2" alt="Avatar">
+            </v-avatar>
+          </v-btn>
+        </template>
+        <v-card>
+          <v-card-text>
+            <div class="mx-auto text-center">
+              <v-avatar size="50px">
+                <img src="../assets/头像.jpg" class="img2" alt="Avatar">
+              </v-avatar>
+              <div class="text-h5 relative1">
+                {{ username }}
+              </div>
+              <v-divider class="my-2"></v-divider>
+              <!-- <v-btn variant="text" rounded class="jiacu">
+                上传头像
+              </v-btn> -->
+              <v-dialog>
+                <template v-slot:activator="{ props: activatorProps }">
+                  <v-btn v-bind="activatorProps" variant="text" rounded class="jiacu">
+                    上传头像
+                  </v-btn>
+                </template>
+                <template v-slot:default="{ isActive }">
+                  <v-card title="Dialog">
+                    <v-card-text>
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                      labore
+                      et dolore magna aliqua.
+                    </v-card-text>
+                    <v-card-actions>
+                      <v-spacer></v-spacer>
+                      <v-btn text="Close Dialog" @click="isActive.value = false"></v-btn>
+                    </v-card-actions>
+                  </v-card>
+                </template>
+              </v-dialog>
+              <v-divider class="my-2"></v-divider>
+              <v-dialog>
+                <template v-slot:activator="{ props: activatorProps }">
+                  <v-btn v-bind="activatorProps" variant="text" rounded class="jiacu">
+                    修改个人信息
+                  </v-btn>
+                </template>
+                <template v-slot:default="{ isActive }">
+                  <v-card title="Dialog">
+                    <v-card-text>
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                      labore
+                      et dolore magna aliqua.
+                    </v-card-text>
+                    <v-card-actions>
+                      <v-spacer></v-spacer>
+                      <v-btn text="Close Dialog" @click="isActive.value = false"></v-btn>
+                    </v-card-actions>
+                  </v-card>
+                </template>
+              </v-dialog>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-menu>
+      <!-- <v-avatar size="80px" class="float-left" style="border:solid white;">
+        <img src="../assets/头像.jpg" class="img2" alt="Avatar">
+      </v-avatar> -->
+      <!-- 用户名 -->
+      <div class="float-left">
+        <div class="text-h6 user float-left">
+          {{ username }}
+        </div>
+        <div class="text-subtitle-1 user float-left" style="color:red;">
+          {{ level }}级
+        </div>
+        <div class="text-subtitle-1 user1">
+          积分：{{ score }}
+        </div>
+      </div>
+    </div>
+    <div class="relative2">
+      <h class="text-h6">最近比赛</h>
+      <h class="text-h6 float-right">更多</h>
+      <v-divider thickness="3px"></v-divider>
+      <v-card class="card1">
+        <div class="text-h6" style="height: 33px;" v-for="(item, index) in items" :key="index">
+          <div class="float-left zhibiao1">
+            {{ item.username }}
+          </div>
+          <div class="float-left zhibiao2">
+            {{ item.score1 }}
+          </div>
+          <div class="float-left">
+            :
+          </div>
+          <div class="float-left zhibiao2">
+            {{ item.score2 }}
+          </div>
+          <div class="float-left zhibiao1">
+            {{ item.username1 }}
+          </div>
+          <div class="float-right" style="line-height: 32px;">
+            <v-dialog>
+              <template v-slot:activator="{ props: activatorProps }">
+                <v-icon>mdi-chevron-right</v-icon>
+              </template>
+              <template v-slot:default="{ isActive }">
+                <v-card title="Dialog">
+                  <v-card-text>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                    et dolore magna aliqua.
+                  </v-card-text>
+                  <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn text="Close Dialog" @click="isActive.value = false"></v-btn>
+                  </v-card-actions>
+                </v-card>
+              </template>
+            </v-dialog>
+          </div>
+          <br>
+        </div>
+      </v-card>
+    </div>
+  </div>
+  <!-- </v-container> -->
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { reactive } from 'vue';
+const username = ref('XXX');
+const username1 = ref('XXX');
+const score = ref(1);
+const score1 = ref(1);
+const score2 = ref(1);
+const level = ref("A");
+const items = reactive([
+  {
+    username: 'User1',
+    score1: 10,
+    score2: 5,
+    username1: 'User2',
+    extraInfo: 'adas'
+  },
+  {
+    username: 'User3',
+    score1: 8,
+    score2: 3,
+    username1: 'User4',
+    extraInfo: 'adas'
+  }
+]
+);
+
+</script>
+
+<style>
+.background {
+  width: 100%;
+  height: 100px;
+  position: relative;
+  z-index: -1;
+}
+
+.img1 {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.yuanjiao {
+  height: 100%;
+  border-radius: 6px;
+  position: relative;
+  top: -6px;
+  z-index: 10;
+  background-color: white;
+}
+
+.img2 {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.relative {
+  position: relative;
+  top: -22px;
+  height: 80px;
+  margin-left: 20px;
+  z-index: 10;
+}
+
+.user {
+  position: relative;
+  top: 22px;
+  height: 32px;
+  margin-left: 20px;
+  line-height: 32px;
+  font-family: "Times New Roman", "宋体";
+}
+
+.user1 {
+  position: relative;
+  top: 22px;
+  margin-left: 20px;
+  line-height: 22px;
+  font-family: "Times New Roman", "宋体";
+}
+
+.jiacu {
+  font-weight: bold;
+}
+
+.relative1 {
+  position: relative;
+  top: 5px;
+}
+
+.relative2 {
+  position: relative;
+  top: -22px;
+  margin-left: 20px;
+  margin-top: 10px;
+  margin-right: 20px;
+}
+
+.card1 {
+  margin-top: 4px;
+}
+
+.zhibiao1 {
+  width: 25%;
+  text-align: center;
+}
+
+.zhibiao2 {
+  width: 10%;
+  text-align: center;
+}
+</style>
\ No newline at end of file

vuetify-project/src/gamemanage.js

+/**
+ * main.js
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './gamemanage.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')

vuetify-project/src/gamemanage.vue

+<!-- <script setup>
+import Dialog from './components/dialog.vue';
+
+import { ref } from 'vue';
+
+const count = ref(0)
+const info = ref(0)
+
+function testclick() {
+  count.value++
+  info.value=count.value
+}
+
+</script>
+
+
+<template>
+  <v-app>
+    <v-main>
+      
+
+      <Dialog class="dialog" ></Dialog>
+      <v-btn @click="testclick">
+
+      </v-btn>
+      <div>{{ info }}</div>
+    </v-main>
+  </v-app>
+</template>
+
+ -->
+<script setup>
+  // import { ref } from 'vue';
+  // const tab = ref(null)
+  // const text = ref('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.')
+  // export default {
+  //   data () {
+  //     return {
+  //       tab: null,
+  //       text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  //     }
+  //   },
+  // }
+</script>
+<template>
+  <!-- <div>发起比赛</div> -->
+</template>
+
+<style>
+.main-card{
+  height: 100%;
+  width: 100%;
+}
+
+.tabs{
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+}
+
+
+</style>
\ No newline at end of file

vuetify-project/src/home.js

+/**
+ * main.js
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './home.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')

vuetify-project/src/home.vue

+<!-- <script setup>
+import Dialog from './components/dialog.vue';
+
+import { ref } from 'vue';
+
+const count = ref(0)
+const info = ref(0)
+
+function testclick() {
+  count.value++
+  info.value=count.value
+}
+
+</script>
+
+
+<template>
+  <v-app>
+    <v-main>
+      
+
+      <Dialog class="dialog" ></Dialog>
+      <v-btn @click="testclick">
+
+      </v-btn>
+      <div>{{ info }}</div>
+    </v-main>
+  </v-app>
+</template>
+
+ -->
+<script setup>
+  // import { ref } from 'vue';
+  // const tab = ref(null)
+  // const text = ref('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.')
+  // export default {
+  //   data () {
+  //     return {
+  //       tab: null,
+  //       text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  //     }
+  //   },
+  // }
+</script>
+<template>
+  <!-- <div>首页</div> -->
+</template>
+
+<style>
+.main-card{
+  height: 100%;
+  width: 100%;
+}
+
+.tabs{
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+}
+
+
+</style>
\ No newline at end of file

vuetify-project/src/login.js

+/**
+ * main.js
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './login.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')

vuetify-project/src/login.vue

+<script setup>
+// import HelloWorld from './components/HelloWorld.vue';
+import { ref } from 'vue';
+import LoginComp from './components/login_comp.vue'
+import RegisterComp from './components/register_comp.vue'
+
+const tab = ref(null)
+
+</script>
+
+
+<template>
+  <v-app class="h-100 w-100">
+    <v-main class="h-100 w-100 d-flex justify-center align-center">
+      <v-card class="main-card ">
+        <div class="card-title bg-deep-purple-accent-4 text-h5 text-center pa-5">
+          南高乒乓球俱乐部
+        </div>
+
+        <v-tabs
+            v-model="tab"
+            bg-color="deep-purple-accent-4"
+            grow
+          >
+            <v-tab value="login">
+              登录
+            </v-tab>
+            <v-tab value="register">
+              注册
+            </v-tab>
+          </v-tabs>
+          <v-window v-model="tab">
+            <v-window-item 
+            :key="1"
+            :value="'login'">
+              <LoginComp></LoginComp>
+            </v-window-item>
+            <v-window-item 
+            :key="2"
+            :value="'register'">
+              <RegisterComp></RegisterComp>
+            </v-window-item>
+          </v-window>
+      </v-card>
+    </v-main>
+  </v-app>
+</template>
+
+<style>
+.main-card{
+  width: 300px;
+  /* height: 500px; */
+}
+
+
+
+</style>

vuetify-project/src/main.js

+/**
+ * main.js
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './main.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')

vuetify-project/src/main.vue

+<script setup>
+import { ref } from 'vue';
+import Gamemanage from './components/gamemanage.vue';
+import Space from './components/space.vue';
+import Home from './components/home.vue';
+
+const tab = ref(null)
+</script>
+<template>
+  <div class="h-screen w-auto">
+    <v-window v-model="tab" class="h-screen w-auto">
+      <v-window-item :key="1" :value="'tab-1'" class="h-screen w-auto">
+          <Home></Home>
+      </v-window-item>
+      <v-window-item :key="2" :value="'tab-2'" class="h-screen w-auto">
+          <Gamemanage></Gamemanage>
+      </v-window-item>
+      <v-window-item :key="3" :value="'tab-3'" class="h-screen w-auto">
+          <Space></Space>
+      </v-window-item>
+    </v-window>
+    <v-tabs v-model="tab" bg-color="deep-purple-accent-4" align-tabs="center" stacked grow class="tabs">
+      <v-tab value="tab-1">
+        <v-icon>mdi-phone</v-icon>
+        首页
+      </v-tab>
+
+      <v-tab value="tab-2">
+        <v-icon>mdi-heart</v-icon>
+        比赛
+      </v-tab>
+
+      <v-tab value="tab-3">
+        <v-icon>mdi-account-box</v-icon>
+        我的
+      </v-tab>
+    </v-tabs>
+  </div>
+</template>
+
+<style>
+.tabs {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  z-index: 100;
+}
+
+/*.main-card{
+  height: 100%;
+  width: 100%;
+}
+
+.window-list, .window-item, iframe{
+  height: 100%;
+  width: 100%;
+}*/
+</style>
\ No newline at end of file

vuetify-project/src/plugins/README.md

+# Plugins
+
+Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.

vuetify-project/src/plugins/index.js

+/**
+ * plugins/index.js
+ *
+ * Automatically included in `./src/main.js`
+ */
+
+// Plugins
+import vuetify from './vuetify'
+
+export function registerPlugins (app) {
+  app.use(vuetify)
+}

vuetify-project/src/plugins/vuetify.js

+/**
+ * plugins/vuetify.js
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+// Composables
+import { createVuetify } from 'vuetify'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  //
+})

vuetify-project/src/space.js

+/**
+ * main.js
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './space.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')

vuetify-project/src/space.vue

+<!-- <script setup>
+import Dialog from './components/dialog.vue';
+
+import { ref } from 'vue';
+
+const count = ref(0)
+const info = ref(0)
+
+function testclick() {
+  count.value++
+  info.value=count.value
+}
+
+</script>
+
+
+<template>
+  <v-app>
+    <v-main>
+      
+
+      <Dialog class="dialog" ></Dialog>
+      <v-btn @click="testclick">
+
+      </v-btn>
+      <div>{{ info }}</div>
+    </v-main>
+  </v-app>
+</template>
+
+ -->
+<script setup>
+  // import { ref } from 'vue';
+  // const tab = ref(null)
+  // const text = ref('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.')
+  // export default {
+  //   data () {
+  //     return {
+  //       tab: null,
+  //       text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  //     }
+  //   },
+  // }
+</script>
+<template>
+  <!-- <div>个人空间</div> -->
+</template>
+
+<style>
+.main-card{
+  height: 100%;
+  width: 100%;
+}
+
+.tabs{
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+}
+
+
+</style>
\ No newline at end of file

vuetify-project/vite.config.mjs

+// Plugins
+import Components from 'unplugin-vue-components/vite'
+import Vue from '@vitejs/plugin-vue'
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import ViteFonts from 'unplugin-fonts/vite'
+
+// Utilities
+import { defineConfig } from 'vite'
+import { fileURLToPath, URL } from 'node:url'
+
+import {resolve} from 'path';
+
+
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    Vue({
+      template: { transformAssetUrls }
+    }),
+    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
+    Vuetify(),
+    Components(),
+    ViteFonts({
+      google: {
+        families: [{
+          name: 'Roboto',
+          styles: 'wght@100;300;400;500;700;900',
+        }],
+      },
+    }),
+  ],
+  define: { 'process.env': {} },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+    extensions: [
+      '.js',
+      '.json',
+      '.jsx',
+      '.mjs',
+      '.ts',
+      '.tsx',
+      '.vue',
+    ],
+  },
+  server: {
+    port: 3000,
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        index: resolve(__dirname, 'index.html'),
+        home: resolve(__dirname, 'home.html'),
+        space: resolve(__dirname, 'space.html'),
+        main: resolve(__dirname, 'main.html'),
+      }
+    },
+  },
+})