laravel和vuejs第一个最简单的示例hello Vuejs

淩亂°似流年 2022-06-03 04:09 299阅读 0赞

# 纯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="width=device-width, initial-scale=1"> <title>Laravel</title>  <script src="https://unpkg.com/vue"></script> <style> </style> </head> <body> <div id="app"> @{ { message}} </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: 'Hello Vuejs!' } }) </script> </body> </html>

这里要特别注意的是，不用laravel的时候，下面这段代码中

<div id="app"> @{ { message}} </div>

那个小老鼠@符号不是必须的。但在laravel的blade模板中，必须引入该符号。如果不引入该符号，laravel会按照blade的语法寻找message这个变量，结果肯定是找不到的，会报错。加上@之后，vuejs就会处理该变量。

走完这第一步，接下来都是同样的原理。在vuejs官方文档里面的例子，都可以在laravel中尝试。只是要注意laravel的blade语法和vuejs的语法处理方式的不同。