# 页面

**Repository Path**: laravel-admin/web

## Basic Information

- **Project Name**: 页面
- **Description**: 基于daisyui,vue3的全新UI界面
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://demo.laraveladmin.cn/web
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-12
- **Last Updated**: 2025-09-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LaravelAdmin UI

#### 介绍
基于daisyui,vue3的全新LaravelAdmin UI界面

[English document](./README.en.md)

#### 软件架构
软件架构说明


#### 安装教程

1.  拉取代码到本地
```bash
git clone https://gitee.com/laravel-admin/web.git
```

2.  拉取docker的node环境镜像
```bash
docker pull node:24
```
如果拉取镜像失败,请替换成[国内镜像源](./docker/daemon.json)再进行拉取
```json
{
    "registry-mirrors": [
        "https://mirror.ccs.tencentyun.com",
        "http://registry.docker-cn.com",
        "http://docker.mirrors.ustc.edu.cn",
        "http://hub-mirror.c.163.com",
        "https://docker.registry.cyou",
        "https://docker-cf.registry.cyou",
        "https://dockercf.jsdelivr.fyi",
        "https://docker.jsdelivr.fyi",
        "https://dockertest.jsdelivr.fyi",
        "https://mirror.aliyuncs.com",
        "https://dockerproxy.com",
        "https://mirror.baidubce.com",
        "https://docker.m.daocloud.io",
        "https://docker.nju.edu.cn",
        "https://docker.mirrors.sjtug.sjtu.edu.cn",
        "https://mirror.iscas.ac.cn",
        "https://docker.rainbond.cc",
        "https://registry.docker-cn.com",
        "https://dockerhub.azk8s.cn",
        "https://reg-mirror.qiniu.com",
        "https://registry-farsight.cn",
        "https://registry.hub.docker.com",
        "https://registry-mirror.github.com"
    ],
    "insecure-registries": [
        "registry.docker-cn.com",
        "docker.mirrors.ustc.edu.cn"
    ],
    "debug": true,
    "experimental": true
}

```
3.  创建软连接
```bash
ln -s ./docker/docker-compose.yml docker-compose.yml
```
4. 设置.env配置文件及通讯加密配置文件,对应内容找部署服务端的人员生成
```bash
cp ./vue/.env.example ./vue/.env
cp ./vue/src/extensions/rsa.example.js ./vue/src/extensions/rsa.js
vi ./vue/.env
vi ./vue/src/extensions/rsa.js
```
5.  启动服务
```bash
docker-compose up -d
```
6.  启动成功后，访问http://localhost:5173

7. 如果访问出现401页面
- 请检查.env配置文件中的VITE_API_BASE_URL是否正确
- 请确保后端服务已经启动
- 配置了CORS跨域
  - 安装fruitcake/laravel-cors扩展
  - 配置config/cors.php文件
  - 配置config/laravel_admin.php文件中的with_api为true

8. 在线演示站点:https://demo.laraveladmin.cn/web

#### 生产部署教程
1. 进入到服务器后端代码部署目录
```bash
cd /var/www/laravel/laraveladmin
```
2. 拉取界面代码
```bash
git clone https://gitee.com/laravel-admin/web.git
```
3. 进入到界面代码目录
```bash
cd web
```

4.  拉取docker的node环境镜像
```bash
docker pull node:24
```

5.  创建软连接
```bash
ln -s ./docker/docker-compose-prod.yml docker-compose.yml
```

6. 安装依赖
```bash
docker-compose run --rm node npm install
```

7. 设置.env配置文件及通讯加密配置文件,对应内容找部署服务端的人员生成
```bash
cp ./vue/.env.example ./vue/.env
cp ./vue/src/extensions/rsa.example.js ./vue/src/extensions/rsa.js
vi ./vue/.env
vi ./vue/src/extensions/rsa.js
```

8. 编译代码
```bash
docker-compose run --rm node npm run build
```
9. 部署到服务器可访问的目录
将编译后的代码部署到服务器的`/var/www/laravel/laraveladmin/public`目录下
```bash
cd ../public
ln -s ../vue/dist/assets assets
mkdir web
cd web
ln -s ../../vue/dist/index.html index.html
```
10. 访问https://demo.laraveladmin.cn/web


#### 使用说明

1.  参考vue文档:https://vuejs.org/
2.  参考组件文档:https://daisyui.com/
3.  参考基础样式文档:https://tailwindcss.com/
4.  参考图标文档:https://fontawesome.com/
5.  参考pinia文档:https://pinia.vuejs.org/
6.  参考vue-router文档:https://router.vuejs.org/

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)