Vue Flask 模板项目技术文档

Vue Flask 模板项目技术文档

1. 安装指南

1.1 环境准备

在开始安装之前，请确保您的开发环境满足以下要求：

• Node.js 版本 12 或更高
• Python 版本 3.6 或更高

1.2 安装步骤

1. 克隆项目：

   git clone https://github.com/Ailln/vue-flask-template.git --depth 1
   cd vue-flask-template
   

2. 安装前端依赖：

   cd front
   npm install
   

3. 安装后端依赖：

   cd ../back
   pip install -r requirements.txt
   

2. 项目的使用说明

2.1 启动项目

1. 启动前端：

   cd front
   npm run dev
   

2. 启动后端：

   cd ../back
   python app.py
   

3. 访问项目： 在浏览器中打开 http://localhost:3000/ 即可预览项目。

2.2 项目结构

.
├── front # 前端
│    ├── package.json # 前端依赖
│    ├── package-lock.json
│    ├── public
│    ├── src
│    │    ├── App.vue # 主页面
│    │    ├── components # 子组件
│    │    │    └── HelloWorld.vue
│    │    ├── assets # 静态资源
│    │    └── main.js
│    └── vite.config.js
├── back # 后端
│    ├── app.py
│    └── requirements.txt # 后端依赖
├── README.md
├── LICENSE
└── .gitignore

3. 项目API使用文档

3.1 后端API

后端使用 Flask 框架，默认启动在 http://localhost:5000/。

3.1.1 示例API

• URL: /api/hello
• Method: GET
• Description: 返回一个简单的问候消息。
• Response:

  {
      "message": "Hello, World!"
  }
  

3.2 前端API调用

前端通过 axios 或其他 HTTP 客户端库调用后端API。例如：

import axios from 'axios';

axios.get('http://localhost:5000/api/hello')
    .then(response => {
        console.log(response.data.message);
    })
    .catch(error => {
        console.error('There was an error!', error);
    });

4. 项目安装方式

4.1 使用模板创建项目

1. 访问 Vue Flask Template 项目页面。
2. 点击右上角的绿色按钮 Use this template。
3. 输入项目名称和描述，完成创建。

4.2 手动克隆项目

git clone https://github.com/Ailln/vue-flask-template.git --depth 1

4.3 安装依赖

按照 安装指南 中的步骤安装前端和后端依赖。

---

通过以上步骤，您可以顺利安装并启动 Vue Flask 模板项目，并根据需要进行开发和定制。