使用 Flask 作为后端（提供 API 和页面服务），VUE 作为前端（实现模块化、动态路由和漂亮 UI），我们可以构建一个现代化的后台管理页面。我们将采用如下架构： --- ### ✅ 技术栈 - **后端**：Flask（Python）—— 提供 `/api` 接口和渲染主页 - **前端**：Vue 3 + Vue Router + Element Plus（UI 框架，美观且组件丰富） - **目录结构**： ``` project/ ├── backend/ # Flask 后端 │ ├── app.py │ └── templates/index.html ├── frontend/ # Vue 前端（通过 Vite 构建） │ ├── src/ │ │ ├── views/ # 页面组件 │ │ ├── components/ # 公共组件（如侧边栏） │ │ ├── router/index.js # 路由配置 │ │ └── App.vue / main.js │ └── index.html ├── static/ # 构建后的静态资源（由 Vue 输出到此处） └── templates/ # Flask 使用的模板 └── index.html # 主页面入口 ``` 我们让 Flask 渲染 `templates/index.html`，而 Vue 处理前端路由和组件展示。 --- ## ✅ 步骤一：Flask 后端（backend/app.py） ```python # backend/app.py from flask import Flask, render_template from flask_cors import CORS app = Flask(__name__, template_folder='../templates', static_folder='../static') CORS(app) # 开启跨域（如果前后端分离部署可能需要） # 示例 API @app.route('/api/menu') def get_menu(): menu_data = [ { "id": 1, "label": "仪表盘", "name": "Dashboard", "path": "/dashboard" }, { "id": 2, "label": "用户管理", "name": "User", "path": "/user" }, { "id": 3, "label": "文章管理", "name": "Article", "path": "/article" } ] return {"menu": menu_data} # 主页路由 @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(port=5000, debug=True) ``` > 注意：`template_folder` 和 `static_folder` 指向项目根目录下的对应文件夹。 --- ## ✅ 步骤二：Vue 前端（使用 Vite + Vue 3 + Element Plus） ### 安装前端（在 `frontend/` 目录下） ```bash npm create vue@latest # 选择：Vue Router, Pinia 可选，CSS 预处理器可选 cd frontend npm install element-plus axios @element-plus/icons-vue npm run dev ``` --- ### 前端目录结构示例 ``` frontend/src/ ├── views/ │ ├── Dashboard.vue │ ├── User.vue │ └── Article.vue ├── components/ │ └── Sidebar.vue ├── router/ │ └── index.js └── App.vue ``` --- ### 组件 1：`components/Sidebar.vue` ```vue <!-- frontend/src/components/Sidebar.vue --> <template> <el-menu class="sidebar-menu" default-active="1" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse="false" router > <el-menu-item v-for="item in menu" :key="item.id" :index="item.path"> <span>{{ item.label }}</span> </el-menu-item> </el-menu> </template> <script setup> import { ref, onMounted } from 'vue' import axios from 'axios' const menu = ref([]) onMounted(async () => { const res = await axios.get('http://localhost:5000/api/menu') menu.value = res.data.menu }) </script> <style scoped> .sidebar-menu { height: 100vh; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); } </style> ``` --- ### 视图组件示例：`views/Dashboard.vue` ```vue <!-- frontend/src/views/Dashboard.vue --> <template> <div class="view-container"> <h2>📊 仪表盘</h2> <p>欢迎进入系统后台管理面板！</p> </div> </template> <style scoped> .view-container { padding: 20px; font-size: 18px; } </style> ``` 类似地创建 `User.vue` 和 `Article.vue`。 --- ### 路由配置：`router/index.js` ```js // frontend/src/router/index.js import { createRouter, createWebHistory } from 'vue-router' import Dashboard from '../views/Dashboard.vue' import User from '../views/User.vue' import Article from '../views/Article.vue' const routes = [ { path: '/dashboard', component: Dashboard }, { path: '/user', component: User }, { path: '/article', component: Article }, { path: '/', redirect: '/dashboard' } ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` --- ### 主应用：`App.vue` ```vue <!-- frontend/src/App.vue --> <template> <el-container style="height: 100vh;"> <!-- 左侧菜单 --> <el-aside width="200px"> <Sidebar /> </el-aside> <!-- 右侧内容区 --> <el-main> <router-view></router-view> </el-main> </el-container> </template> <script setup> import Sidebar from './components/Sidebar.vue' </script> <style> body, #app { margin: 0; padding: 0; height: 100%; } </style> ``` --- ### 主入口：`main.js` ```js // frontend/src/main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import '@element-plus/icons/css/index.css' const app = createApp(App) app.use(router) app.use(ElementPlus) app.mount('#app') ``` --- ## ✅ 构建与集成 ### 构建 Vue 项目到 Flask 静态目录 修改 `vite.config.js`： ```js // vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], build: { outDir: '../static', // 输出到 Flask 的 static 文件夹 emptyOutDir: true, }, server: { proxy: { '/api': { target: 'http://localhost:5000', changeOrigin: true, } } }, base: '/', // 确保路径正确 }) ``` 然后构建： ```bash npm run build # 构建后文件输出到 ../static ``` --- ### 最终 `templates/index.html`（由 Flask 返回） ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>后台管理系统</title> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/> </head> <body> <div id="app"></div> <!-- 引入 Vite 构建后的 JS --> <script type="module" src="{{ url_for('static', filename='assets/index-xxxx.js') }}"></script> <!-- 实际上我们用通配符或自动生成方式更好，但简单起见，也可用 webpack 打包成单文件 --> </body> </html> ``` ⚠️ 问题：Vite 输出的文件名带 hash，难以直接引用。 ### ✅ 解决方案：使用 `flask-vite` 或手动复制为 `main.js` 更推荐：使用 Webpack 或配置 Vite 输出为固定名称： ```js // vite.config.js 中增加 build: { rollupOptions: { output: { entryFileNames: 'assets/main.js', assetFileNames: 'assets/[name].[ext]' } } } ``` 然后在 `index.html` 中引入： ```html <script type="module" src="{{ url_for('static', filename='assets/main.js') }}"></script> ``` --- ## ✅ 运行流程 1. 启动 Flask： ```bash python backend/app.py ``` 2. 启动 Vue 开发服务器（开发时）： ```bash cd frontend && npm run dev ``` 3. 构建生产版本： ```bash npm run build ``` 4. 访问 `http://localhost:5000` 查看效果。 --- ## ✅ 效果说明 - 左侧是动态从 Flask `/api/menu` 加载的菜单树（可扩展为多级嵌套） - 右侧是 Vue Router 渲染的页面内容 - 使用 Element Plus 提供现代化 UI，支持暗色主题、动画等 - 支持模块化开发：每个页面独立 `.vue` 文件 ---