[译]如何基于Laravel构建Vue应用(一)
使用Laravel能优雅的构建API并且与Vue单页面应用程序(SPA)完美结合。在本教程中,我们将展示如何启动和运行Vue路由器以及用于构建SPA的Laravel后端。我们将重点关注所需的所有部分,然后在后续教程中,我们将进一步演示如何使用Laravel作为API层。
Vue SPA如何运行的:
- 第一个请求命中服务器端Laravel路由器
- Laravel渲染SPA布局
- 后续请求利用
history.pushState
API进行URL导航,而无需重新加载页面
Vue路由器可以配置为history模式或hash模式。默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。history 模式,这种模式充分利用 history.pushState
API 来完成 URL 跳转而无须重新加载页面。
这里我们使用history模式,所以需要我们需要配置一个Laravel路由,该路由将匹配所有可能的URL,具体取决于用户进入Vue SPA的路由。例如,如果用户刷新/hello
路由,我们将需要匹配该路由并返回Vue SPA应用程序模板。然后,Vue路由器将确定路由并渲染相应的组件。
安装
首先,我们创建一个新的Laravel项目,然后安装Vue路由器NPM包:
laravel new vue-router cd vue-router # Link the project if you use Valet valet link # Install NPM dependencies and add vue-router yarn install yarn add vue-router # or npm install vue-router
配置Vue路由器
这里的 <router-view>
是最顶层的出口,渲染最高级路由匹配到的组件。同样地,一个被渲染组件同样可以包含自己的嵌套 <router-view>
。
<router-view></router-view>
首先,我们将更新主要的JavaScript文件resources/assets/js/app.js
并配置Vue路由器。用以下内容替换app.js
文件的内容:
import Vue from 'vue' import VueRouter from 'vue-router'//导入并安装VueRouter插件 Vue.use(VueRouter) import App from './views/App'//作为App最外层应用程序组件的组件 import Hello from './views/Hello'//导入自定义Hello组件 import Home from './views/Home'//导入自定义Home组件 //构造一个VueRouter带有配置对象的新实例 const router = new VueRouter({ mode: 'history', routes: [ { path: '/', name: 'home', component: Home }, { path: '/hello', name: 'hello', component: Hello, }, ], }); const app = new Vue({ el: '#app', components: { App }, router, });
然后我们需要创建一些文件,但首先,我们将介绍以下内容app.js
:
- 我们导入并安装
VueRouter
插件Vue.use()
我们导入三个Vue组件:
- 作为
App
最外层应用程序组件的组件, - 一个
Hello
映射到组件/hello
- 一个
Home
映射到组件/
home
- 作为
- 我们构造一个
VueRouter
带有配置对象的新实例 - 我们
App
通过将组件传递给components
Vue构造函数中的属性来使Vue知道该组件 - 我们将
router
常量注入到新的Vue应用程序中以访问this.$router
和this.$route
该VueRouter
构造函数采用的路线,我们定义的路径,名称(就像Laravel的命名路线),并映射到路径组件的数组。
我喜欢将我的路由定义移动到我导入的单独路由模块中,但为了简单起见,我们将在主应用程序文件中定义路由。
为了使Laravel mix成功运行,我们需要定义三个组件:
mkdir resources/assets/js/views touch resources/assets/js/views/App.vue touch resources/assets/js/views/Home.vue touch resources/assets/js/views/Hello.vue
首先,该App.vue
文件是我们应用程序的最外层容器元素。在这个组件中,我们将使用Vue Router的<router-link/>
标签定义应用程序标题和一些导航:
<template> <div> <h1>Vue Router Demo App</h1> <p> <router-link :to="{ name: 'home' }">Home</router-link> | <router-link :to="{ name: 'hello' }">Hello World</router-link> </p> <div class="container"> <router-view></router-view> </div> </div> </template> <script> export default {} </script>
我们App
组件中最重要的标签是<router-view></router-view>
标签,我们的路由器将呈现与路径匹配的给定组件(即Home
或Hello
)。
我们需要定义的下一个组件位于resources/assets/js/views/Home.vue
:
<template> <p>This is the homepage</p> </template>
最后,我们定义Hello
位于以下位置的组件resources/assets/js/views/Hello.vue
:
<template> <p>Hello World!</p> </template>
我喜欢将我的可重用组件与特定于视图的组件分开,方法是将视图组织到resources/assets/js/views
文件夹和我真正可重用的组件中resources/assets/js/components
。这是我的惯例,我发现它运行良好,因此我可以轻松地分离哪些组件可以重用,哪些组件是特定于视图的。
就前端而言,我们拥有运行Vue应用程序所需的一切!接下来,我们需要定义后端路由和服务器端模板。
服务器端
我们利用像Laravel这样的应用程序框架和Vue SPA,以便我们可以构建服务器端API来使用我们的应用程序。我们还可以使用Blade来渲染我们的应用程序并通过全局JavaScript对象公开环境配置,这在我看来很方便。
在本教程中,我们不打算构建API,但我们将进行后续跟进。这篇文章是关于连接Vue路由器的全部内容。
我们将在服务器端解决的第一件事是定义路由。打开routes/web.php
文件并使用以下内容替换欢迎路径:
<?php /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/{any}', 'SpaController@index')->where('any', '.*');
我们定义了一条全能路线,SpaController
这意味着任何网络路线都将映射到我们的SPA。如果我们没有这样做,并且用户提出了请求/hello
,Laravel会回复404。
接下来,我们需要创建SpaController
并定义视图:
php artisan make:controller SpaController
打开SpaController
并输入以下内容:
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class SpaController extends Controller { public function index() { return view('spa'); } }
最后,输入以下内容resources/views/spa.blade.php
:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue SPA Demo</title> </head> <body> <div id="app"> <app></app> </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html>
我们已经定义了#app
包含App
Vue将呈现的组件的必需元素,以及基于URL呈现适当的组件。
运行应用程序
该基础用于构建具有Vue和Vue路由器的SPA。我们需要构建或JavaScript来测试它:
yarn watch # or npm run watch
如果您在浏览器中加载应用程序,您应该看到如下内容: