今天開始，學院君將花幾個篇幅的教程給大家快速過一下如何基於 Laravel 框架進行單頁面應用開發。
一、初始化項目和前端依賴
開始之前，先通過如下步驟初始化一個新的 Laravel 項目作爲單頁面應用演示項目：
// 1、初始化 Laravel 項目
laravel new demo-spa
// 2、安裝 laravel/ui 擴展包
cd demo-spa
composer require laravel/ui
php artisan ui vue
// 3、安裝 & 編譯前端依賴
npm install && npm run dev
二、安裝 Vue Router 和 Vuex
要基於 Vue 框架構建單頁面應用，Vue Router 和 Vuex 是不可或缺的前端依賴庫，前者是 Vue 官方提供的前端頁面路由管理器，後者是 Vue 官方提供的前端組件狀態（數據）管理器。關於這兩個依賴庫的語法細節這裏不展開了，你可以參考對應的官方文檔或者網上視頻進行更深入的瞭解。
我們可以在 demo-spa 項目根目錄下通過如下命令安裝這兩個前端依賴：
npm install vue-router vuex --save-dev
安裝完成後，就可以在 resources/js/app.js 中引入並使用它們了，以 Vue Router 爲例，我們可以在 resources/js 目錄下新建一個 routes.js 作爲前端路由文件，然後在 app.js 中這樣通過 Vue Router 引入前端路由：
window.Vue = require('vue');
import VueRouter from 'vue-router';
import routes from './routes';
Vue.use(VueRouter);
...
const app = new Vue({
el: '#app',
router: new VueRouter(routes)
});
三、編寫前端頁面組件
爲了演示前端路由的使用，我們先在 resources/js/components 目錄下新建兩個頁面組件Home.vue：
<style scoped>
</style>
<template>
<h1>Home Page</h1>
</template>
<script>
export default {}
</script>
和 About.vue：
<style scoped>
</style>
<template>
<h1>About Page</h1>
</template>
<script>
export default {}
</script>
四、編寫前端路由導航
接下來，我們在前端路由文件 resources/js/routes.js 中編寫幾個測試路由：
export default {
mode: 'history',
routes: [
{
path: '/',
component: require('./components/Home').default
},
{
path: '/about',
component: require('./components/About').default
}
]
}
這裏我們使用了 HTML5 History 模式 在不同前端路由之間實現頁面無刷新切換。
五、在 HTML 視圖中渲染前端路由導航
做好上述準備工作後，就可以在 HTML 視圖模板中通過如下方式渲染通過 Vue Router 路由匹配到的前端頁面組件了：
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="{{ asset('/css/app.css') }}" rel="stylesheet">
</head>
<body class="antialiased">
<div id="app">
<!-- 路由匹配到的組件將渲染在這裏 -->
<router-view></router-view>
<hr>
<!-- 使用 router-link 組件來導航 -->
<!-- 通過傳入 `to` 屬性指定鏈接 -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</div>
<script src="{{ asset('/js/app.js') }}"></script>
</body>
</html>
六、測試前端路由導航組件渲染
運行 npm run dev 重新編譯前端資源，在運行 php artisan serve 啓動 Web 服務器，在瀏覽器中訪問 http://127.0.0.1:8000/，即可看到默認渲染的 Home 頁面：
點擊「About」鏈接，即可切換到 About 頁面：
這樣，我們就基於 Vue Router 構建起了一個非常簡單的單頁面應用項目骨架。下篇教程我們將通過對頁面組件進行佈局來構建更加複雜的單頁面應用。
