通过 Laravue 快速构建基于 Laravel + Vue + Element 的管理后台

项目简介

Laravue 是一个基于 Laravel + Vue.js + Element UI 开发的原型项目,我们可以通过它快速构建管理后台页面。该项目参考了 vue-element-admin,并且以功能强大的 Laravel 框架作为后端,高性能的 Vue.js 作为前端,完全可以作为企业应用级的全栈解决方案。

你可以通过演示站点预览该基于项目搭建的后台界面,也可以按照下面学院君演示的安装使用步骤探索更多细节,以下教程开发环境是 MacOS + Homestead。

该项目的 Github 地址是:https://github.com/tuandm/laravue

安装配置

在宿主机通过 Composer 安装该项目:

composer create-project tuandm/laravue

然后进入项目根目录,打开环境配置文件 .env 修改环境配置:

APP_NAME=Laravue
...
APP_URL=http://laravue.test
...
DB_DATABASE=laravue

注:如果 .env 不存在的话,通过 cp .env.example .env 生成。

接下来配置 Homestead 全局配置文件 Homestead.yaml

folders:
    ... // 其它目录映射
    - map: ~/Devlopment/php/laravel/laravue
      to: /home/vagrant/laravue
sites:
    ... // 其它站点配置
    - map: laravue.test
      to: /home/vagrant/laravue/public  

databases:
    ... // 其它数据库
    - laravue

然后通过 vagrant up --provision 重启虚拟机让上述配置生效,再通过 homesteads ssh 登录到虚拟机,进入项目根目录,执行数据库迁移和填充命令:

cd laravue
php artisan migrate --seed

生成 JWT 密钥:

php artisan jwt:secret

安装前端依赖并编译前端资源:

npm install
npm run dev

回到本地宿主机,在 /etc/hosts 中添加域名映射:

192.168.10.10 laravue.test

使用入门

接下来,我们就可以在浏览器中访问 http://laravue.test 了:

使用默认填充测试账号登录后即可进入仪表盘页面:

你可以参考官方文档通过 Laravue 提供的组件快速构建应用后台管理界面和功能。