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开发环境搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

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