实战教程一：从零搭建现代化教师辅助平台 (环境与架构)
1. 项目背景与目标
本项目旨在打造一个基于 Vue 3 的现代化教师辅助平台，核心解决教师备课、出卷、做课件的三大痛点。
技术选型：
- 核心框架: Vue 3 (Composition API)
- 构建工具: Vite (极速开发体验)
- 路由管理: Vue Router 4
- 状态管理: Pinia
- UI 风格: 手绘风格 (Architects Daughter 字体 + CSS3)
2. 初始化项目
首先，使用 Vite 快速初始化项目骨架。
# 创建项目
npm create vite@latest teacher -- --template vue
# 进入目录
cd teacher
# 安装基础依赖
npm install vue-router pinia axios sass localforage file-saver @vueuse/core
3. 目录结构设计
一个清晰的目录结构是项目成功的关键。我们按照功能模块划分：
src/
├── api/ # API 接口封装 (AI 接口)
├── assets/ # 静态资源 (字体、图片)
├── components/ # 公共组件 (Toolbar, Modal等)
├── config/ # 配置文件 (模型配置, 常量)
├── router/ # 路由定义
├── store/ # Pinia 状态仓库
├── utils/ # 工具函数
├── views/ # 页面级组件
│ ├── LessonPlanGenerator.vue # 教案生成
│ ├── PPTEditor.vue # PPT 编辑器
│ └── ExamEditor.vue # 试卷编辑器
├── App.vue #以此为根组件
└── main.js # 入口文件
4. 路由配置 (Router Setup)
在 src/router/index.js 中配置核心导航。我们采用单页应用 (SPA) 模式，通过路由切换不同的编辑器功能。
import {
createRouter, createWebHistory } from "vue-router";
import LessonPlanGenerator from "../views/LessonPlanGenerator.vue";
import ExamEditor from "../views/ExamEditor.vue";
import PPTEditor from "../views/PPTEditor.vue";
const routes = [
{
path: "/", name: "Home", component: LessonPlanGenerator }, // 默认首页为教案生成
{
path: "/exam", name: "ExamEditor", component: ExamEditor },
{
path: "/ppt", name: "PPTEditor", component: PPTEditor },
];
const router = createRouter({
history: createWebHistory("/teacher/"), // 设置 Base URL
routes,
});
export default router;
5. 全局状态管理 (Pinia)
我们需要一个全局 Store 来管理用户的设置（如 AI 模型选择、API Key 等），这对于后续所有 AI 功能至关重要。
创建 src/store/settings.js:
import {
defineStore } from "pinia";
import {
ref } from "vue";
export const useSettingsStore = defineStore("settings", () => {
const apiKey = ref(localStorage.getItem("api_key") || "");
const selectedModel = ref("qwen-plus");
function setApiKey(key) {
apiKey.value = key;
localStorage.setItem("api_key", key);
}
return {
apiKey, selectedModel, setApiKey };
});
6. UI 风格基调：手绘风
为了让工具更有“黑板”或“手写笔记”的亲切感，我们定义全局 CSS。
在 src/style.css 中：
body {
background-color: #fdfbf7; /* 米黄色纸张质感 */
color: #2c3e50;
}
/* 通用按钮样式 - 手绘风格 */
button {
border: 2px solid #2c3e50;
border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; /* 不规则圆角 */
transition: transform 0.1s;
}
button:hover {
transform: scale(1.05) rotate(-1deg);
}
在线体验
演示链接： https://www.ytecn.com/teacher/
git链接： https://github.com/tcshowhand/teacher/
演示截图
总结
至此，我们已经搭建好了项目的“地基”。我们拥有了路由导航、状态管理以及独特的视觉风格。接下来，我们将逐一攻克核心功能模块。
