laravel 使用 vue （gulp）

1）首先要安裝 gulp

看這裏 http://www.cnblogs.com/tujia/p/6397779.html 

 

2）編輯js

默認 laravel 裏有一個 /resources/assets/js/app.js  這個 gulp 要編譯文件，gulp 將 /resources/assets/js/app.js 編譯成 /public/js/app.js 文件，/public/js/app.js 在公共底部被引用

 

雖然 /resources/assets/js 裏只有一個 app.js，但不表明你只能寫一個 js，你能夠寫本身的js，再用 larave-exlixir 工具合併成一個 js 

elixir(function(mix) {
    mix.scripts([
        'order.js',
        'forum.js'
    ]);
});

PS:默認保存在 /public/js/all.js 裏，固然也能夠本身改保存路徑

elixir(function(mix) {
    mix.scripts(['app.js', 'controllers.js'], 'public/js/app.js')
       .scripts(['forum.js', 'threads.js'], 'public/js/forum.js');
});

若是你還想懶一點，能夠直接給一個js目錄就能夠打包了（默認保存在 /public/js/all.js 裏）

elixir(function(mix) {
    mix.scriptsIn('public/js/some/directory');
});

 

3）應用 js 

終端運行 gulp 命令就能夠編譯打包 js 了

gulp

若是你想壓縮 js，能夠加上 --product 參數

gulp --product

 

4）debug 模型

在開發階段，若是你以爲每次修改後都要執行 gulp 命令比較麻煩，那你能夠使用下面這個偵聽命令

gulp watch

它會偵聽項目裏的文件變化，若是文件發生的修改就會自動編譯了，不須要重複執行 gulp 命令

 

5）舒適提示

laravel 公共模版裏引用 app.js 沒加版本號，app.js 會被瀏覽器緩存了，因此有時候你刷新可能會看不到變化，你能夠加一個時間戳（測試的時候，正式環境建議在後臺加一個「版本號」配置）

<script src="/js/app.js?{{rand()}}"></script>

<script src="/js/app.js?{{$app_version}}"></script>

 

---

 

完