From: https://www.jianshu.com/p/1c2cc11ba46f

描述

最近通过laravel在公司做了一些项目，但本身前端出身的我，总是感觉lphp开发过程中,前端写好页面，然后后端还需要再套blade模板，感觉这样开发效率太慢，太low。于是自己抽了空闲时间，在laravel中搭了vue开发环境。这样感觉前后端分离，开发更有效率。而且我更喜欢这种前后分离的开发模式。其实laravel中已经给我们配置好了前端各种开发环境只需要我们去自己稍微的手动配置一下就可以，所以今天我搭了一个简单的开发环境，从前台vue+vue-router+vuex+axios,到后台laravel框架,model,controller,到数据库mysql全部打通。git:项目地址,需要打大家点个start。
首先看一下整体的laravel+vue目录结构

laravel+vue目录结构

1.搭建laravel+vue环境

这一步假设大家都已经有了php环境，同时也安装了composer,这样我们只需要通过命令直接去下载一个标准的laravel目录。
composer create-project --prefer-dist laravel/laravel laravel+vue "5.5.*"
这样下载的项目里，laravel里面配置了webpack.mix.js。不需要我们手动配置。这一步需要等待一段时间。
在安装laravel的时候，我们也可以同时安装node_modules初始化node模块
npm install
这两步等待的时间比较长，安装好后，目录结构就想上面一样.如果你是从github中下载下来的缺少node_modules模块也需要npm install一下。上面下载好目录结构以后,我们修改一下webpack.mix.js文件。添加一个代理端口
mix.browserSync({ proxy: 'localhost:8000'});
接下来我们在控制台通过php命令启动项目,
php artisan serve
这个项目就会通过你代理的端口启动起来,地址是你本地地址http://127.0.0.1:8080。一个显示laravel的界面就在浏览器中展现，如图

控制台命令

效果显示

2.vue配置

下面我们把项目中的显示内容清理一下，为vue整合做准备。我们把在resources/views目录下的welcome.blade.php中的显示内容清理掉。只保留基本的html结构。
这里我们接着把vue-router安装好，后续会用到
npm install vue-router

html结构

在vue项目中我们需要一个app.js作为启动入口。这个app.js在laravel中项目已经为我们建好了，在/resources/assets/js下面，我们只需要把他引过来
<script type="text/javascript" src="/js/app.js"></script>
我们还需要aap.css，也在/resources/assets/css下
<link rel="stylesheet" type="text/css" href="/css/app.css">
配置好之后，我们先在welcome.blade.php中添加上vue的路由放在div中，
<router-view />
去修改app.js

/*** First we will load all of this project's JavaScript dependencies which* includes Vue and other libraries. It is a great starting point when* building robust, powerful web applications using Vue and Laravel.*/
require('./bootstrap');
window.Vue = require('vue');
/*** Next, we will create a fresh Vue application instance and attach it to* the page. Then, you may begin adding components to this application* or customize the JavaScript scaffolding to fit your unique needs.*/
var app = new Vue({el: '#app',template: "<div>这是laravel+vue的项目</div>"
});

开启npm run watch,刷新浏览器,如图

最简单的一个laravel+vue的项目demo

至此，laravel+vue搭建的项目完全的跑起来了，这一阶段，没有涉及到vue-router,没有涉及到后台和数据库。下面进一步完善路由的管理

3.vue-router管理页面跳转

在上面我们安装了vue-router在app.js中引入vue-router包，并使用此插件。接下来>在/resources/assets/js目录下创建一个路由管理器route.js。
{ path: '/', component: require('./compontents/Index.vue')
我们在/resources/assets/js/compontents目录下创建一个Index.vue组件
<template></template><script>export default {name: "Index"}</script><style scoped></style>
接下来我们在修改一下app.js。

require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import routes from './route';    // 路由配置文件
// 实例化路由
const router = new VueRouter({routes
})
var vm = new Vue({router
}).$mount('#app');

配置好之后,刷新浏览器，如图

显示配置好的index组件

路由配置完成后，接下来就是后台设计与通信。我们先做后台，

4.后台laravel model+controller设计

在设计后台之前我们先把数据库链接好，修改.env文件,链接好本地数据库，数据库表结构在git上面有,database下面。
在app目录下面创建Models，在Models下面创建一个user类

<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class User extends Model
{protected $table = 'user';protected $guarded = [];// 测试类public function  getInfo(){$users = self::get();return $users;}
}

在app\Http\Controllers目录下创建UserController控制器

<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Routing\Controller;
class UserController extends Controller
{public function __construct(){$this->objUser = new User();}public function getUserList(){return $this->objUser->getInfo();}
}

在routes\api.php下面配置访问UserController控制器下的getUserList方法的路由

<?phpuse Illuminate\Http\Request;/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/Route::middleware('auth:api')->get('/user', function (Request $request) {return $request->user();
});
Route::any('/getUserList','UserController@getUserList');

导入数据表，配置好数据库的链接。在浏览器输入localhost:8000/api/getUserList是否能获取数据,如图

获取数据

5.axios+vuex配合获取后台数据渲染页面

接下来，就是配置前台axios访问后台接口获取数据并渲染到页面中显示。在这一块，我们通过vuex状态树，来管理数据的变化。虽然只是一个demo，并没有什么太大的作用。但在后续开发应用中，庞大的数据源很难管理，我们就可以借助vuex来管理。通过npm命令行安装vuex
npm install vuex
同时还需要安装axios
npm install axios
安装好后,我们在resources\assets\js目录下创建store文件,在store文件创建store.js文件

import Vue from 'vue';
import Vuex from 'vuex';
import user from './user';
Vue.use(Vuex);
export default new Vuex.Store({// 可以设置多个模块modules: {user}
});

在resources\assets\js\store创建user.js

import api from '../api';
export default{state: {user: []},mutations: {// 注意，这里可以设置 state 属性，但是不能异步调用，异步操作写到 actions 中SETUSER(state, lists) {state.user = lists;}},actions: {getUser({commit}) {api.getUser().then(function(res) {//console.log(res);commit('SETUSER', res.data);});}}
}

在resources\assets\js目录下创建api.js集中存放访问接口的api,后期便于管理

import axios from 'axios'
export default {// 首页接口getUser: function (params) {return axios.get('api/getUserList')},
}

上面文件创建好之后，我们还需要修改app.js引入store，因为在store中我们引入了vuex,在这里就不需要引入vuex，直接引入store。


require('./bootstrap');window.Vue = require('vue');import VueRouter from 'vue-router';
Vue.use(VueRouter);
import store from './store/'; // vuex 数据存储所需对象
import routes from './route';    // 路由配置文件
// 实例化路由
const router = new VueRouter({routes
})var vm = new Vue({store,router
}).$mount('#app');

最后在Index.vue中获取数据并渲染

<template><div>1<ul class="list-group"><li class="list-group-item"v-for="item in user">{{ item.account }}</li></ul></div>
</template><script>import { mapState, mapActions } from 'vuex';export default {name: "App",// 映射 vuex 上面的属性computed: mapState({user: state => state.user.user}),created() {this.getUser();//console.log(this.$store.state);},methods: {// 映射 vuex 对象上的方法...mapActions(['getUser'])}}
</script><style scoped></style>

最后刷新页面如图,

最后的效果图

总结

至此，整个laravel+vue搭建的环境从前台到后台到数据库完全打通。整片文章，可能存在很多问题，这是一个整体的思路。后续开发，我们就可以按照这个结构愉快的码代码，比起套模板的形式，舒服多了。这个结构在后续上线的时候其实存在一些问题，比如seo的问题，首屏加载慢的问题等。在这个基础上，我们完全可以在借助其他库，完成优化。后续可能我会继续整合一下服务选渲染的问题。最后整个项目建议在git上下载，因为上面文章只是大体思路，可能存在一路下来粘贴复制不能跑的问题,目录结构稍有不同。要是快速的看到效果，直接去下载git:项目地址,下载的同时，需要大家点个star，支持一下。

laravel+vue开发环境搭建相关推荐

Vue 开发环境搭建（Mac 版）
Vue 开发环境搭建(Mac 版) 参考: https://www.jianshu.com/p/cc722eba1f46 https://www.runoob.com/w3cnote/vue2-sta ...
一 vue开发环境搭建
2016年,Vue同Angular.React形成三足鼎立的局面,让前端的开发者顾不暇接,今天我们就来了解一下Vue的环境搭建. 一.node.js安装: node.js:一种javascript的运 ...
vue开发环境搭建Mac版
一.前言因工作缘故,需要做一个移动端app,面对2016下半年至今webapp最流行的三个技术React,angular,vue,三选一,如何先,经过前期的技术选型,最后决定使用vue.具体查看本人 ...
Vue开发环境搭建及在docs新建vue项目
参考: https://www.cnblogs.com/winter92/p/7117057.html (写在开头的废话:相信很多人在学习vue这个框架时,最开始搭建开发环境,容易遇到一些大大小小的坑 ...
vue 开发环境搭建
1.创建vue项目 1.node js 生成项目,编译项目 2.hbuilder 开发环境 1.下载安装node js http://nodejs.cn/download/ 确认是否安装成功如果安装 ...
Vue开发环境搭建和vue-cli脚手架
vue本质是一个js脚本,提供了一个前端框架.在开发时,可以直接引入这个js脚本,也可以使用脚手架工具,在本地搭建一个项目. Vue.js安装方法一.在 Vue.js 的官网上直接下载 vue.mi ...
Vue开发环境搭建详细操作（NodeCnpmVue）
目录一.安装node.js 二.安装cnpm 三.安装Vue 四.常用命令五.其他扩展信息一.安装node.js 1.官网下载地址:Download | Node.js 2.设置nodejs p ...
Cesium Vue开发环境搭建
最近被问到如何在 vuejs 中集成 cesium,首先想到的官网应该有教程.官网有专门讲 Cesium and Webpack(有坑),按照官网的说明,动手建了一个Demo,在这记录下踩坑过程. 一 ...
VS Code + Vue 开发环境搭建
1.下载并安装 Visual Studio Code 2019 2.Visual Studio Code 2019安装成功后,打开VS Code 工具点击左侧[扩展]菜单,在搜索栏中输入 Chines ...

laravel+vue开发环境搭建

描述

1.搭建laravel+vue环境

2.vue配置

3.vue-router管理页面跳转

4.后台laravel model+controller设计

5.axios+vuex配合获取后台数据渲染页面

总结

laravel+vue开发环境搭建相关推荐

最新文章

热门文章