TP6-Vue-Admin 安装和配置指南

TP6-Vue-Admin 安装和配置指南

tp6-vue-admin 基于thinkphp6+vue2.6+element2.13 前后端分离落地解决方案 项目地址: https://gitcode.com/gh_mirrors/tp/tp6-vue-admin

1. 项目基础介绍和主要编程语言

TP6-Vue-Admin 是一个基于 ThinkPHP 6 和 Vue.js 2.6 的前后端分离的后台管理系统解决方案。该项目旨在帮助开发者快速搭建企业级Web应用，提供了丰富的功能模块和良好的用户体验。

• 主要编程语言: PHP（后端）、JavaScript（前端）

2. 项目使用的关键技术和框架

• 后端框架: ThinkPHP 6
• 前端框架: Vue.js 2.6、Element UI 2.13
• 数据库: MySQL（默认）
• 包管理工具: Composer（PHP）、npm（Node.js）

3. 项目安装和配置的准备工作和详细安装步骤

3.1 准备工作

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

• PHP 版本 >= 7.1
• Node.js 版本 >= 14.18.1
• Composer 已安装
• npm 已安装
• MySQL 数据库

3.2 安装步骤

3.2.1 克隆项目代码

首先，从GitHub克隆项目代码到本地：

git clone https://github.com/hardphp/tp6-vue-admin.git
cd tp6-vue-admin

3.2.2 安装后端依赖

进入项目根目录，使用Composer安装PHP依赖：

composer install

3.2.3 配置后端环境

复制 .env.example 文件并重命名为 .env，然后根据您的环境配置数据库连接信息：

cp .env.example .env

编辑 .env 文件，配置数据库连接：

DB_HOST=127.0.0.1
DB_NAME=your_database_name
DB_USER=your_database_user
DB_PASSWORD=your_database_password

3.2.4 初始化数据库

运行数据库迁移命令，创建必要的表结构：

php think migrate:run

3.2.5 安装前端依赖

进入前端目录 vue-admin，使用npm安装前端依赖：

cd vue-admin
npm install

3.2.6 配置前端环境

在 vue-admin 目录下，复制 .env.example 文件并重命名为 .env，然后根据您的环境配置API接口地址：

cp .env.example .env

编辑 .env 文件，配置API接口地址：

VUE_APP_BASE_API=http://localhost:8000

3.2.7 运行前端开发服务器

在 vue-admin 目录下，运行前端开发服务器：

npm run serve

3.2.8 启动后端服务器

在项目根目录下，启动ThinkPHP内置服务器：

php think run

3.3 访问项目

• 前端: 打开浏览器，访问 http://localhost:8080
• 后端: 访问 http://localhost:8000

3.4 登录系统

使用默认账号和密码登录系统：

• 账号: admin
• 密码: 123456

4. 结语

通过以上步骤，您已经成功安装并配置了TP6-Vue-Admin项目。您可以根据项目文档进一步了解和定制功能模块，以满足您的业务需求。

tp6-vue-admin 基于thinkphp6+vue2.6+element2.13 前后端分离落地解决方案 项目地址: https://gitcode.com/gh_mirrors/tp/tp6-vue-admin