Laravel 本身对前端开发就提供了很多支持,5.3 更是直接引入了 Vue 这个目前最流行的轻量级前端框架,这篇文章使用一个简单的例子说明一下怎么在laravel中直接使用vue,从而让让前端开发和后端无缝。
首先声明: 在测试这个5.4版本的时候遇到过很多坑,将集中在这一篇文章中说明
1.新建Laravel5.4项目,安装依赖包,配置虚拟主机
我这里下载laravel包直接是在网页下的,当然你也可以使用Compose来下载新建项目
composer create-project --prefer-dist laravel/laravel Laravel54 // 新项目名为 Laravel54
cd Laravel54 //切换项目目录
npm install // 速度慢的请自行切换淘宝镜像 cnpm安装
安装完前端依赖之后目录大致如下:
配置虚拟主机这里不作过多介绍,入口目录为public
2.修改路由文件,新建hello.vue组件
修改 routes/web.php 文件为:
Route::get('/', function () { return view('index'); });
在 resources/assets/js/components 目录下新建 Hello.vue 文件:
<template> <div> <h1>{{ msg }}</h1> </div> </template> <script> export default { data() { return { msg: 'Hello World' } } } </script>
3.修改 app.js 文件,渲染组件,新建 Laravel 视图文件,加入vue组件
//Vue.component('example', require('./components/Example.vue'));//注释掉原来的默认组件 Vue.component('hello', require('./components/Hello.vue'));//引入hello组件
在 resources/views 目录下新建 index.blade.php 文件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <meta name="csrf-token" content="{{ csrf_token() }}"> </head> <body> <div id="app"> <!--这里加入hello组件--> <hello></hello> </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html>
说明:你可能在其他教程中看到有的在使用 assets 函数,这两个函数的主要区别就是 assets 函数会直接使用所填路径去 public 文件夹下找文件,而 mix 函数会自动加载带 hash 值的前端资源。这是和 Laravel 前端资源的缓存刷新相关的
4.编译运行
npm run dev