這幾天終于開始搗騰SPA了,其實(shí)vue+laravel是可以做前后端分離的,只是我們一個(gè)大項(xiàng)目里包裹了兩個(gè)小項(xiàng)目,現(xiàn)在還是混合開發(fā),但是配置上來(lái)說走了蠻多坑,這里也分享一下.友情提醒這篇文章只適合使用過vue的旁友!!!

本身在之前我們一直是用laravel視圖做不需要交互的數(shù)據(jù)綁定,而laravel5.4版本自帶vue,所以如果你們也是這樣開發(fā)的,你們的項(xiàng)目里應(yīng)該會(huì)有個(gè)這玩意

沒錯(cuò)!!!打開它,你會(huì)看到laravel已經(jīng)給配置了vue的環(huán)境

你只要在項(xiàng)目目錄`npm install --save-dev`就可以把這些環(huán)境都裝下來(lái)

然后,接下來(lái)是重頭戲,很多剛剛前后端分離的人也會(huì)搞混,網(wǎng)上也很少有資料

敲黑板請(qǐng)前端同學(xué)記住,vue+laravel模式,是后臺(tái)只給一個(gè)blade.php模板文件,剩下的,全都自己在resources/assets/js下面寫!包括路由!js,sass等等!

來(lái)一張結(jié)構(gòu)圖

然后!關(guān)鍵的來(lái)了,我們寫的東西怎么引用到blade.php模板引擎上去?

打開你的終端!到項(xiàng)目目錄,`npm run dev`

如果你沒有配錯(cuò)路由寫錯(cuò)語(yǔ)法等等自己寫錯(cuò)的情況,現(xiàn)在會(huì)用laravel-mix幫你在項(xiàng)目根目錄/public/js/下生成app.js

然后我們到blade.php上引用剛剛生成的app.js即可!

laravel-mix是啥?這就是一個(gè)超級(jí)無(wú)敵縮減版的webpack,具體可以看官方github:laravel-mix

目前這種工作方式對(duì)于直接用ftp在服務(wù)器上寫代碼的同學(xué)不是很友好,因?yàn)槟愀耐暌粋€(gè)vue文件laravel-mix可以自動(dòng)打包,但是app.js需要你手動(dòng)ftp上傳..如果在本地有docker環(huán)境的同學(xué)!!恭喜你,你找到了前端敲代碼怎么爽怎么來(lái)的方法