# T-FAST-WEB

**Repository Path**: Thmspring/t-fast-web

## Basic Information

- **Project Name**: T-FAST-WEB
- **Description**: T-FAST-WEB是一款基于VUE3.0+Element-plus的快速开发脚手架，拥有完整的权限管理功能，支持国际化，可对接后台项目，开箱即用。该项目为前后端分离项目的前端部分，后端项目T-FAST地址：https://gitee.com/Thmspring/t-fast
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-11-13
- **Last Updated**: 2023-10-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# T-FAST-WEB

# 简介
> T-FAST-WEB是一款基于VUE3.0+Element-plus的快速开发脚手架，拥有完整的权限管理功能，支持国际化，可对接后台项目，开箱即用。该项目为前后端分离项目的前端部分，后端项目T-FAST地址：https://gitee.com/Thmspring/t-fast

# 项目演示

- 地址：http://114.116.12.151
- 账号：develop
- 密码：1qaz!QAZ

![](./src/assets/1.png)

# 技术选型
| 技术                     | 版本       | 说明                                               |
|------------------------|----------|--------------------------------------------------|
| Vue             | 3.2.37   | 前端框架                                             |
| Vue-router         | 4.1.2    | 	路由框架                                            |
| Vuex               | 3.2.37   | 	全局状态管理框架                                        |
| Element-Plus           | 2.2.9    | 前端UI框架                                           |
| MAxios | 0.27.2   | 前端HTTP框架                                         |
| Js-cookie            | 3.0.1    | cookie管理工具                                       |
| nprogress                  | 0.2.0    | 进度条控件                                            |
| vue-next-admin                  | 3.0      | 项目脚手架参考 https://gitee.com/lyt-top/vue-next-admin |

# 项目布局
```text
src -- 源码目录
├── api                         -- axios网络请求定义
├── assets                      -- 静态图片资源文件
├── components                  -- 通用组件封装
├── i18n                        -- 国际化配置
├── layout                      -- 布局
├── router                      -- vue-router路由配置
├── store                       -- vuex的状态管理
├── theme                       -- 全局css样式
├── utils                       -- 工具类
└── views                       -- 前端页面
    ├── home                    -- 401/404
    ├── home                    -- 首页
    ├── login                   -- 登录页
    ├── personal                -- 个人中心
    └── system                  -- 系统配置
        ├── dict                -- 字典管理
        ├── file                -- 文件管理
        ├── log                 -- 日志管理
        ├── menu                -- 菜单管理
        ├── org                 -- 组织管理
        ├── permission          -- 权限管理
        ├── resource            -- 资源管理
        ├── role                -- 角色管理
        └── user                -- 用户管理
```

# 搭建步骤

- 安装node: v16.18.0
- 该项目为前后端分离项目，访问本地访问接口需搭建后台环境，搭建请参考后端项目https://gitee.com/Thmspring/t-fast;
- 在IDEA命令行中运行命令：`npm install`,下载相关依赖
- 在IDEA命令行中运行命令：`npm run dev`,运行项目
    > dev启动项目配置端口和本地访问路径需要修改 `.env`和`.env.development`, 在`vite.config.ts`配置请求代理
- 在IDEA命令行中运行命令：`npm run build`,打包项目
    > 项目打包请求地址配置`.env`中`VITE_PUBLIC_PATH`参数，影响访问路径
- 访问地址：http://localhost:11420 即可打开后台管理系统页面

# 感谢

> 感谢`vue-next-admin`开源团队，因为本人几乎不写前端，所以采用了`vue-next-admin`前端框架进行修改，再次感谢`vue-next-admin`开源团队。

`vue-next-admin`项目地址： https://gitee.com/lyt-top/vue-next-admin