# Step 1: 项目初始化和环境搭建

## 目标

完成Vue 3项目的初始化，安装必要的依赖项，并配置好开发环境。

## 步骤

### 1.1 创建Vue 3 + Vite项目

使用Vue官方的脚手架工具创建新项目：

```bash
npm create vue@latest student-app-frontend
```

在创建过程中选择以下选项：

- 是否使用TypeScript？选择 `No`
- 是否启用JSX支持？选择 `No`
- 是否引入Vue Router进行单页面应用开发？选择 `Yes`
- 是否引入Pinia进行状态管理？选择 `Yes`
- 是否引入Vitest进行单元测试？选择 `No`
- 是否引入Cypress进行端到端测试？选择 `No`
- 是否引入ESLint进行代码质量检查？选择 `Yes`
- 是否引入Prettier进行代码格式化？选择 `Yes`

### 1.2 安装项目依赖

进入项目目录并安装依赖：

```bash
cd student-app-frontend
npm install
```

### 1.3 阶段性验证1：运行基础项目

启动开发服务器：

```bash
npm run dev
```

在浏览器中访问 `http://localhost:5173`，应该能看到Vue的欢迎页面。按 `Ctrl+C` 停止服务器。

### 1.4 安装Vuetify

安装Vuetify和Material Design Icons：

```bash
npm install vuetify @mdi/font
```

### 1.5 配置Vuetify

创建Vuetify插件配置文件 `src/plugins/vuetify.js`：

```javascript
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

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

export default vuetify
```

在 `src/main.js` 中引入并使用Vuetify插件：

```javascript
import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

// 引入Vuetify
import vuetify from './plugins/vuetify'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(vuetify) // 添加这一行以使用Vuetify

app.mount('#app')
```

### 1.6 阶段性验证2：验证Vuetify集成

修改 `src/App.vue` 文件以测试Vuetify组件：

```vue
<script setup></script>

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-row>
          <v-col>
            <v-card>
              <v-card-title>Vue + Vuetify项目初始化成功</v-card-title>
              <v-card-text>
                <p>这是一个使用Vuetify组件的示例卡片</p>
              </v-card-text>
              <v-card-actions>
                <v-btn color="primary">主要按钮</v-btn>
                <v-btn color="secondary">次要按钮</v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<style scoped></style>
```

再次运行项目：

```bash
npm run dev
```

在浏览器中访问 `http://localhost:5173`，应该能看到一个带有Vuetify样式的卡片组件。这表明Vuetify已经成功集成到项目中。

### 1.7 安装其他依赖（可选）

如果需要额外的工具库，可以安装：

```bash
npm install axios  # HTTP客户端
```

## 完成标志

- [x] Vue 3 + Vite项目创建完成
- [x] 依赖安装成功
- [x] 基础项目可以正常运行
- [x] Vuetify成功集成
- [x] Vuetify组件可以正常显示

## 下一步

进入Step 2：配置Vue Router和路由守卫