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

描述

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

laravel+vue目錄結(jié)構(gòu)

?

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

這一步假設(shè)大家都已經(jīng)有了php環(huán)境，同時(shí)也安裝了composer,這樣我們只需要通過命令直接去下載一個(gè)標(biāo)準(zhǔn)的laravel目錄。
composer create-project --prefer-dist laravel/laravel laravel+vue "5.5.*"
這樣下載的項(xiàng)目里，laravel里面配置了webpack.mix.js。不需要我們手動(dòng)配置。這一步需要等待一段時(shí)間。
在安裝laravel的時(shí)候，我們也可以同時(shí)安裝node_modules初始化node模塊
npm install
這兩步等待的時(shí)間比較長(zhǎng)，安裝好后，目錄結(jié)構(gòu)就想上面一樣.如果你是從github中下載下來的缺少node_modules模塊也需要npm install一下。上面下載好目錄結(jié)構(gòu)以后,我們修改一下webpack.mix.js文件。添加一個(gè)代理端口
mix.browserSync({ proxy: 'localhost:8000'});
接下來我們?cè)诳刂婆_(tái)通過php命令啟動(dòng)項(xiàng)目,
php artisan serve
這個(gè)項(xiàng)目就會(huì)通過你代理的端口啟動(dòng)起來,地址是你本地地址http://127.0.0.1:8080。一個(gè)顯示laravel的界面就在瀏覽器中展現(xiàn)，如圖

控制臺(tái)命令

?

效果顯示

2.vue配置

下面我們把項(xiàng)目中的顯示內(nèi)容清理一下，為vue整合做準(zhǔn)備。我們把在resources/views目錄下的welcome.blade.php中的顯示內(nèi)容清理掉。只保留基本的html結(jié)構(gòu)。
這里我們接著把vue-router安裝好，后續(xù)會(huì)用到
npm install vue-router

html結(jié)構(gòu)

在vue項(xiàng)目中我們需要一個(gè)app.js作為啟動(dòng)入口。這個(gè)app.js在laravel中項(xiàng)目已經(jīng)為我們建好了，在/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的項(xiàng)目</div>" });

開啟npm run watch,刷新瀏覽器,如圖

?

最簡(jiǎn)單的一個(gè)laravel+vue的項(xiàng)目demo

至此，laravel+vue搭建的項(xiàng)目完全的跑起來了，這一階段，沒有涉及到vue-router,沒有涉及到后臺(tái)和數(shù)據(jù)庫。下面進(jìn)一步完善路由的管理

3.vue-router管理頁面跳轉(zhuǎn)

在上面我們安裝了vue-router在app.js中引入vue-router包，并使用此插件。接下來>在/resources/assets/js目錄下創(chuàng)建一個(gè)路由管理器route.js。
{ path: '/', component: require('./compontents/Index.vue')
我們?cè)?resources/assets/js/compontents目錄下創(chuàng)建一個(gè)Index.vue組件
<template></template><script>export default {name: "Index"}</script><style scoped></style>
接下來我們?cè)谛薷囊幌耡pp.js。

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

配置好之后,刷新瀏覽器，如圖

?

顯示配置好的index組件

路由配置完成后，接下來就是后臺(tái)設(shè)計(jì)與通信。我們先做后臺(tái)，

4.后臺(tái)laravel model+controller設(shè)計(jì)

在設(shè)計(jì)后臺(tái)之前我們先把數(shù)據(jù)庫鏈接好，修改.env文件,鏈接好本地?cái)?shù)據(jù)庫，數(shù)據(jù)庫表結(jié)構(gòu)在git上面有,database下面。
在app目錄下面創(chuàng)建Models，在Models下面創(chuàng)建一個(gè)user類

<?php namespace App\Models; use Illuminate\Database\Eloquent\Model; class User extends Model {protected $table = 'user';protected $guarded = [];// 測(cè)試類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');

導(dǎo)入數(shù)據(jù)表，配置好數(shù)據(jù)庫的鏈接。在瀏覽器輸入localhost:8000/api/getUserList是否能獲取數(shù)據(jù),如圖

?

獲取數(shù)據(jù)

5.axios+vuex配合獲取后臺(tái)數(shù)據(jù)渲染頁面

接下來，就是配置前臺(tái)axios訪問后臺(tái)接口獲取數(shù)據(jù)并渲染到頁面中顯示。在這一塊，我們通過vuex狀態(tài)樹，來管理數(shù)據(jù)的變化。雖然只是一個(gè)demo，并沒有什么太大的作用。但在后續(xù)開發(fā)應(yīng)用中，龐大的數(shù)據(jù)源很難管理，我們就可以借助vuex來管理。通過npm命令行安裝vuex
npm install vuex
同時(shí)還需要安裝axios
npm install axios
安裝好后,我們?cè)趓esources\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({// 可以設(shè)置多個(gè)模塊modules: {user} });

在resources\assets\js\store創(chuàng)建user.js

import api from '../api'; export default{state: {user: []},mutations: {// 注意，這里可以設(shè)置 state 屬性，但是不能異步調(diào)用，異步操作寫到 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，因?yàn)樵趕tore中我們引入了vuex,在這里就不需要引入vuex，直接引入store。

require('./bootstrap');window.Vue = require('vue');import VueRouter from 'vue-router'; Vue.use(VueRouter); import store from './store/'; // vuex 數(shù)據(jù)存儲(chǔ)所需對(duì)象 import routes from './route'; // 路由配置文件 // 實(shí)例化路由 const router = new VueRouter({routes })var vm = new Vue({store,router }).$mount('#app');

最后在Index.vue中獲取數(shù)據(jù)并渲染

<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 對(duì)象上的方法...mapActions(['getUser'])}} </script><style scoped></style>

最后刷新頁面如圖,

?

最后的效果圖

總結(jié)

至此，整個(gè)laravel+vue搭建的環(huán)境從前臺(tái)到后臺(tái)到數(shù)據(jù)庫完全打通。整片文章，可能存在很多問題，這是一個(gè)整體的思路。后續(xù)開發(fā)，我們就可以按照這個(gè)結(jié)構(gòu)愉快的碼代碼，比起套模板的形式，舒服多了。這個(gè)結(jié)構(gòu)在后續(xù)上線的時(shí)候其實(shí)存在一些問題，比如seo的問題，首屏加載慢的問題等。在這個(gè)基礎(chǔ)上，我們完全可以在借助其他庫，完成優(yōu)化。后續(xù)可能我會(huì)繼續(xù)整合一下服務(wù)選渲染的問題。最后整個(gè)項(xiàng)目建議在git上下載，因?yàn)樯厦嫖恼轮皇谴篌w思路，可能存在一路下來粘貼復(fù)制不能跑的問題,目錄結(jié)構(gòu)稍有不同。要是快速的看到效果，直接去下載git:項(xiàng)目地址,下載的同時(shí)，需要大家點(diǎn)個(gè)star，支持一下。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。