## 1. 项目背景与目标

本项目旨在打造一个基于 Vue 3 的现代化教师辅助平台，核心解决教师备课、出卷、做课件的三大痛点。
**技术选型：**

- **核心框架**: Vue 3 (Composition API)
- **构建工具**: Vite (极速开发体验)
- **路由管理**: Vue Router 4
- **状态管理**: Pinia
- **UI 风格**: 手绘风格 ( 字体 + CSS3)

## 2. 初始化项目

首先，使用 Vite 快速初始化项目骨架。

```bash
# 创建项目
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  # 智能大纲生成 (Step 1)
│   ├── LessonPlanEditor.vue     # 详细教案编辑 (Step 2)
│   ├── PPTEditor.vue            # PPT 编辑器
│   └── ExamEditor.vue           # 试卷编辑器
├── App.vue          #以此为根组件
└── main.js          # 入口文件
```

![Vue Project Setup](https://developer.qcloudimg.com/http-save/yehe-12010127/d6288a7e0b65bd9275a22d3bcbad3200.jpg) 
## 4. 路由配置 (Router Setup)

在 `src/router/index.js` 中配置核心导航。我们采用单页应用 (SPA) 模式，核心流程是从“大纲生成”跳转到“教案/PPT/试卷编辑”。

```javascript
import { createRouter, createWebHistory } from "vue";
import LessonPlanGenerator from "../views/LessonPlanGenerator.vue";
import LessonPlanEditor from "../views/LessonPlanEditor.vue"; // 新增
import ExamEditor from "../views/ExamEditor.vue";
import PPTEditor from "../views/PPTEditor.vue";

const routes = [
  { path: "/", name: "Home", component: LessonPlanGenerator }, // 首页：大纲生成
  {
    path: "/lesson-plan",
    name: "LessonPlanEditor",
    component: LessonPlanEditor,
  }, // 详情页：教案编辑
  { 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`:

```javascript
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` 中：

```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/](https://www.ytecn.com/teacher/)
git链接： [https://github.com/tcshowhand/teacher/](https://github.com/tcshowhand/teacher/)

## 总结

至此，我们已经搭建好了项目的“地基”。我们拥有了路由导航、状态管理以及独特的视觉风格。接下来，我们将逐一攻克核心功能模块。

本项目旨在打造一个基于 Vue 3 的现代化教师辅助平台，核心解决教师备课、出卷、做课件的三大痛点。技术选型：

【教案生成平台】实战教程一：从零搭建现代化教师辅助平台 (环境与架构)

本项目旨在打造一个基于 Vue 3 的现代化教师辅助平台，核心解决教师备课、出卷、做课件的三大痛点。

前端

职业发展

Vue3教师辅助平台开发实战，基于Vite构建，采用Pinia状态管理+VueRouter4路由，实现备课、出卷、课件制作功能。提供手绘风格UI设计，包含智能大纲生成、教案编辑、PPT制作等模块，助力教师高效教学。

路由

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

【教案生成平台】实战教程一：从零搭建现代化教师辅助平台 (环境与架构)-腾讯云开发者社区-腾讯云

【教案生成平台】实战教程一：从零搭建现代化教师辅助平台 (环境与架构)

【教案生成平台】实战教程一：从零搭建现代化教师辅助平台 (环境与架构)

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐