本次项目是基于Laravel5.7版本集成ElementUI-react,目前网上并没有相关教程，写出此篇文章，仅供大家参考。
一、创建项目及后台接口搭建
1、终端执行命令：
laravel new laravel-react
2、修改数据库配置
创建数据库并修改配置文件
cd laravel-react
vim .env
3、创建迁移文件及模型
php artisan make:model Article -m
此命令会创建好文章模型和文章表的迁移，迁移文件在database文件夹中查看。
4、修改迁移文件
public function up() {
Schema::create('articles', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->text('content');
$table->timestamps();
});
}
5、执行迁移
php artisan migrate
6、模型定义白名单
protected $fillable = ['title', 'content'];
7、创建接口路由
在routes/api.php文件中写入接口路由
$this->resource('articles', 'ArticleController');
8、创建控制器和方法
php artisan make:controller ArticleController --r
9、接下来就可以去写完成各个接口的增删改查，此处省略，自行完成！
二、安装Element-react
1、修改前端预置，安装react包文件
php artisan preset react
npm install #注意跑这个命令时不要加C
跑完此命令，你会发现resources/js/components文件夹中多了一个Example.js文件，
打开后，如果编辑器代码报红，请调整为react语法即可。
2、安装react路由包
cnpm install react-router
3、安装Element-react前端框架
cnpm i element-react --save
#主题
cnpm install element-theme-default --save
4、在resources/js/app.js文件中写入如下代码：
require('./bootstrap');
import React from 'react';
import 'element-theme-default';
import { Router, Route, browserHistory } from 'react-router';
5、修改resources/views/welcome.blade.php代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel 5.7 ReactJS CRUD Example</title>
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="example"></div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
6、测试：终端执行命令
npm run watch
php artisan serve
刷新浏览器，你会看到如下界面：
7、修改Example.js文件代码如下：
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'element-react';
export default class Example extends Component {
render() {
return (
<div className="block">
<span className="wrapper">
<Button type="success">成功按钮</Button>
<Button type="warning">警告按钮</Button>
<Button type="danger">危险按钮</Button>
<Button type="info">信息按钮</Button>
</span>
</div>
);
}
}
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
测试：刷新浏览器，你会看到如下界面：
至此，ElementUI-react集成完毕。剩下的就是CURD，可参考下面的文档自行完成。
后期还会继续完善！
参考文献：https://elemefe.github.io/element-react/#/zh-CN/quick-start
676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
