[译]如何基于Laravel构建Vue应用（一）

Rocko 发布于2019-07-01 12:42 / 2027人阅读

摘要：使用能优雅的构建并且与单页面应用程序完美结合。我们将重点关注所需的所有部分，然后在后续教程中，我们将进一步演示如何使用作为层。例如，如果用户刷新路由，我们将需要匹配该路由并返回应用程序模板。运行应用程序该基础用于构建具有和路由器的。

使用Laravel能优雅的构建API并且与Vue单页面应用程序（SPA）完美结合。在本教程中，我们将展示如何启动和运行Vue路由器以及用于构建SPA的Laravel后端。我们将重点关注所需的所有部分，然后在后续教程中，我们将进一步演示如何使用Laravel作为API层。

Vue SPA如何运行的：

第一个请求命中服务器端Laravel路由器

Laravel渲染SPA布局

后续请求利用history.pushStateAPI进行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路由器

这里的是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套。

首先，我们将更新主要的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通过将组件传递给componentsVue构造函数中的属性来使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的标签定义应用程序标题和一些导航：

我们App组件中最重要的标签是标签，我们的路由器将呈现与路径匹配的给定组件（即Home或Hello）。

我们需要定义的下一个组件位于resources/assets/js/views/Home.vue：

最后，我们定义Hello位于以下位置的组件resources/assets/js/views/Hello.vue：

我喜欢将我的可重用组件与特定于视图的组件分开，方法是将视图组织到resources/assets/js/views文件夹和我真正可重用的组件中resources/assets/js/components。这是我的惯例，我发现它运行良好，因此我可以轻松地分离哪些组件可以重用，哪些组件是特定于视图的。

就前端而言，我们拥有运行Vue应用程序所需的一切！接下来，我们需要定义后端路由和服务器端模板。

服务器端

我们利用像Laravel这样的应用程序框架和Vue SPA，以便我们可以构建服务器端API来使用我们的应用程序。我们还可以使用Blade来渲染我们的应用程序并通过全局JavaScript对象公开环境配置，这在我看来很方便。

在本教程中，我们不打算构建API，但我们将进行后续跟进。这篇文章是关于连接Vue路由器的全部内容。

我们将在服务器端解决的第一件事是定义路由。打开routes/web.php文件并使用以下内容替换欢迎路径：

where("any", ".*");

我们定义了一条全能路线，SpaController这意味着任何网络路线都将映射到我们的SPA。如果我们没有这样做，并且用户提出了请求/hello，Laravel会回复404。

接下来，我们需要创建SpaController并定义视图：

php artisan make:controller SpaController

打开SpaController并输入以下内容：

最后，输入以下内容resources/views/spa.blade.php：




    
    
    
    Vue SPA Demo

我们已经定义了#app包含AppVue将呈现的组件的必需元素，以及基于URL呈现适当的组件。

运行应用程序

该基础用于构建具有Vue和Vue路由器的SPA。我们需要构建或JavaScript来测试它：

yarn watch # or npm run watch

如果您在浏览器中加载应用程序，您应该看到如下内容：

原文地址https://laravel-news.com/usin...

超融合服务器服务器托管构建基于通讯的云服务器基于lte-fi车载云主机的构建基于lte-fi车载云vps的构建基于lte-fi车载云服务器的构建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/31315.html

PHP / Laravel API 开发推荐阅读清单

showImg(https://segmentfault.com/img/bV6aHV?w=1280&h=800); 社区优秀文章 Laravel 5.5+passport 放弃 dingo 开发 API 实战，让 API 开发更省心 - 自造车轮。 API 文档神器 Swagger 介绍及在 PHP 项目中使用 - API 文档撰写方案推荐 Laravel API 项目必须使用的 8 个...

shmily 2019-06-28 18:34 评论0 收藏0
[译] Laravel-mix 中文文档

摘要：原文地址镜像地址中文文档概览基本示例是位于顶层的一个简洁的配置层，在的情况下使用会使操作变的非常简单。在项目根目录下并没有配置文件，默认指向根目录下的配置文件。否则，它通常与需要删除的错误锁文件有关。该问题已被在修复。原文地址: Laravel Mix Docs 镜像地址 : Laravel-mix 3.0 中文文档概览基本示例 larave-mix 是位于webpack顶层的一...

K_B_Z 2019-07-01 10:01 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

Terry_Tai 2019-08-05 17:19 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0