# 项目安装

# 环境要求

CatchAdmin 要求以下环境:

  • PHP >= 7.2.*
  • Mysql >= 5.7.0
  • PDO Extension
  • MBstring Extension
  • CURL Extension
  • ZIP Extension
  • Composer

TIP

一共需要安装两个项目,一是 PHP 的项目,二是 VUE 项目,请跟着下面的步骤走。

# 安装 PHP 项目

首先需要安装composer包管理器。MAC以及LINUX可使用下面的命令, windows直接下载composer.exe (opens new window)安装, 找到 windows 版本下载。

curl -sS http://install.phpcomposer.com/installer | php

// 由于某种原因,下载包会非常慢,所以需要修改镜像来加速,推荐阿里镜像。
composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/

# 安装一个空 Laravel 项目

composer create-project --prefer-dist laravel/laravel catchadmin

# 安装 CatchAdmin 核心依赖

composer require jaguarjack/catchadmin-laravel --ignore-platform-reqs

# 安装后台, 按照提示输入对应信息即可

php artisan catch:install

TIP

install 又一个可选参数 --root=catch,默认模块会下载到该目录

# 注意事项

  • 安装会默认使用 git clone https://github.com/JaguarJack/catch-laravel-modules.git 下载目录
  • 安装会默认加入 psr-4 autoload,项目的命名空间 CatchAdmin\\
  • 安装会默认执行 composer dump-autoload

所以建议要安装 GitComposer,安装的时候会自动执行。

# 启动后台

php artisan serve

WARNING

注意不能直接访问 PHP 项目,导致 Exception,前后端分离,需要通过 API 接口形式访问,所以你需要安装 VUE 项目后台,看到数据的展示

TIP

如果你是第一次使用 VUE,建议先去看看 VUE 文档,了解一下。

# 下载 vue 项目

在使用前端项目之前,你需要安装前端管理器,这个不多做解释了。推荐使用yarn 安装,首先你需要安装 yarn 管理器。使用淘宝镜像。

WARNING

如果安装不上,有各种各样的错误,别担心,一般都是网络问题。并不是项目问题,这个是很多使用者刚开始都有的问题。你只需要解决网络问题就行了。

yarn config set registry https://registry.npm.taobao.org/

# 下载项目

git clone https://github.com/yanwenwu/catch-admin-vue.git

# 进入目录,使用 yarn 安装

yarn install

# 配置接口地址,找到 vue 项目下的

  • .env.development 文件是配置开发环境的 API 接口地址 (实际上就是 PHP 项目的地址)

# 启动开发模式

请先在前端项目根目录下的.env.development 文件设置 VUE_APP_BASE_API开发环境的 API 请求地址

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = 'http://127.0.0.1:9090'

然后启动项目

npm run dev

TIP

vue 后台使用了是 element admin 文档地址 (opens new window)

# 打包前端项目

打包前请先配置正是环境 API 地址。在项目的根目录下的.env.production文件配置

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = '正式环境的 API 地址'

然后进行打包

npm run build:prod

TIP

前端项目配置最好开启 Gzip,可以加速前端项目访问速度。

# 推荐配置

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip 配置
    gzip  on;
    gzip_min_length 1k;
    gzip_comp_level 4;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;
    gzip_static on;
    gzip_vary on;
    gzip_buffers 8 16k;


    include /etc/nginx/conf.d/*.conf;
}