laravel和vuejs第一個最簡單的示例hello Vuejs
阿新 • • 發佈：2019-02-14
純laravel和vuejs：第一個最簡單的示例
如果你到網上搜索laravel+vuejs，大部分情況下你會得到一堆如何用nodejs，webpack, babel, gulp, browsify搭配使用的文章。哪怕是一個最簡單的應用，也是如此。事實上，取決於你的開發複雜程度，還有除錯和維護人員的水平，很多情況下，webpack等這種急劇增加的複雜程度都不是必須的。如同開發一些不太複雜的網站，你也可以不用vuejs，jquery等工具。
這裡記錄學習的laravel+vuejs最基本的要點，不涉及到任何webpack等打包軟體。只是純粹的laravel和vuejs的組合。後續的學習中也同樣如此。
在laravel裝好以後，直接用下面的程式碼替換掉那個/resources/views/welcome.blade.php之中的內容，就可以顯示Hello Vuejs!,如下
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content 這裡要特別注意的是，不用laravel的時候，下面這段程式碼中
<div id="app">
@{{message}}
</div>那個小老鼠@符號不是必須的。但在laravel的blade模板中，必須引入該符號。如果不引入該符號，laravel會按照blade的語法尋找message這個變數，結果肯定是找不到的，會報錯。加上@之後，vuejs就會處理該變數。
走完這第一步，接下來都是同樣的原理。在vuejs官方文件裡面的例子，都可以在laravel中嘗試。只是要注意laravel的blade語法和vuejs的語法處理方式的不同。