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

描述

最近通過laravel在公司做了一些項目，但本身前端出身的我，總是感覺lphp開發(fā)過程中,前端寫好頁面，然后后端還需要再套blade模板，感覺這樣開發(fā)效率太慢，太low。于是自己抽了空閑時間，在laravel中搭了vue開發(fā)環(huán)境。這樣感覺前后端分離，開發(fā)更有效率。而且我更喜歡這種前后分離的開發(fā)模式。其實laravel中已經給我們配置好了前端各種開發(fā)環(huán)境只需要我們去自己稍微的手動配置一下就可以，所以今天我搭了一個簡單的開發(fā)環(huán)境，從前臺vue+vue-router+vuex+axios,到后臺laravel框架,model,controller,到數據庫mysql全部打通。git:項目地址,需要打大家點個start。
首先看一下整體的laravel+vue目錄結構

laravel+vue目錄結構

?

1.搭建laravel+vue環(huán)境

這一步假設大家都已經有了php環(huán)境，同時也安裝了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安裝好，后續(xù)會用到
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目錄下創(chuàng)建一個路由管理器route.js。
{ path: '/', component: require('./compontents/Index.vue')
我們在/resources/assets/js/compontents目錄下創(chuàng)建一個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目錄下面創(chuàng)建Models，在Models下面創(chuàng)建一個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目錄下創(chuàng)建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狀態(tài)樹，來管理數據的變化。雖然只是一個demo，并沒有什么太大的作用。但在后續(xù)開發(fā)應用中，龐大的數據源很難管理，我們就可以借助vuex來管理。通過npm命令行安裝vuex
npm install vuex
同時還需要安裝axios
npm install axios
安裝好后,我們在resources\assets\js目錄下創(chuàng)建store文件,在store文件創(chuàng)建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創(chuàng)建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目錄下創(chuàng)建api.js集中存放訪問接口的api,后期便于管理

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

上面文件創(chuàng)建好之后，我們還需要修改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搭建的環(huán)境從前臺到后臺到數據庫完全打通。整片文章，可能存在很多問題，這是一個整體的思路。后續(xù)開發(fā)，我們就可以按照這個結構愉快的碼代碼，比起套模板的形式，舒服多了。這個結構在后續(xù)上線的時候其實存在一些問題，比如seo的問題，首屏加載慢的問題等。在這個基礎上，我們完全可以在借助其他庫，完成優(yōu)化。后續(xù)可能我會繼續(xù)整合一下服務選渲染的問題。最后整個項目建議在git上下載，因為上面文章只是大體思路，可能存在一路下來粘貼復制不能跑的問題,目錄結構稍有不同。要是快速的看到效果，直接去下載git:項目地址,下載的同時，需要大家點個star，支持一下。

總結

以上是生活随笔為你收集整理的laravel+vue开发环境搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。