Laravel结合Vue的教程

发表于 |

Laravel因为它的易用性，可扩展性和灵活性，成为成长最快的PHP框架；而Vue是JavaScript社区中成长最快的前端库。而Laravel提供对Vue的直接支持。

本篇博客将带你如何搭建Laravel(5)和Vue（2.0）的开发环境，已经用它们来创建简单的CRUD应用。

创建工程

在终端输入下面的命令：

1
2
composer create-project laravel/laravel antmoving --prefer-dist

安装好工程后，进入工程目录，在终端输入下面的命令：

1
2
npm install

上述命令会安装所有的JavaScript依赖项，包括Vue。它会安装laravel-mix，你可以把它看作是类似于webpack的模块打包工具。

现在，在MySQL中创建一个数据库，并在Laravel中进行配置。打开.env文件中，配置数据库的用户名，数据库名和密码。配置后，在终端输入下面的命令：

1
2
php artisan migrate

进入到resources -> assets -> js -> components，你会看到Example.vue组件。Laravel原生支持Vue，当然，我们也可以使用其它的JavaScript库，比如React和Angular。app.js文件需要该组件，文件会被Laravel Mix编译。

我们需要安装一些其它的库，当然，也需要vue-router来为应用添加路由。

1
2
npm install --save-dev vue-axios vue-loader vue-router vue-template-compiler

编辑默认的配置

使用下面的代码来取代app.js已有的内容：

1
2
3
4
5
6
7
8
9
10
11
12
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);
const router = new VueRouter({ mode: 'history'});
new Vue(Vue.util.extend({ router })).$mount('#app');

上述代码中，我们导入了vue、vue-router、vue-axios和axios库。创建了router对象，并设置了模式为history，这样的话，在每个路由上面就不会出现#。

现在，切换到resources -> views -> welcome.blade.php文件，使用下面的代码取代文件内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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 Vue CRUD Application</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app">
        </div>
         <script>
           window.Laravel = <?php echo json_encode([
               'csrfToken' => csrf_token(),
                    ]); ?>
          </script>
        <script src="{{asset('js/app.js')}}"></script>
    </body>
</html>

我们需要在resources -> assets -> js ->components目录中创建一个Vue组件，命名为App.vue。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
    <div class="container">
        <div>
            <transition name="fade">
                <router-view></router-view>
            </transition>
        </div>
    </div>
</template>
<style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
      opacity: 0
    }
</style>
<script>
    export default{
    }
</script>

该组件会作为应用的容器，当应用的路由改变的时候，对应的组件就会被渲染到<router-view></router-view>标签中。

我们需要将App组件包含到app.js组件中，创建Vue实例的时候，将其传递给它。

1
2
3
import App from './components/App.vue';
new Vue(Vue.util.extend({ router }, App)).$mount('#app');

进入终端，输入下面的命令：

1
2
npm run watch

如果看到任何错误，请检查下是否有依赖项没有正确地安装。

使用vue-router创建路由

在app.js文件中，我们也包含了Example.vue组件，因为我们将要为应用创建路由，首先让我们在app.js文件中创建路由数组。

1
2
3
4
5
6
7
8
9
10
11
const routes = [
  {
      name: 'Example',
      path: '/',
      component: Example
  }
];
const router = new VueRouter({ mode: 'history', routes: routes});
new Vue(Vue.util.extend({ router }, App)).$mount('#app');

上面代码中，创建了路由数组，并将其传递给了router对象，现在，整个app.js文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import VueAxios from 'vue-axios';
import axios from  'axios';
Vue.use(VueAxios,axios);
import App from './components/App.vue';
import Example from './components/Example.vue';
const routes = [
    {
        name: 'Example',
        path: '/',
        component: Example
    }
];
const router = new VueRouter({mode: 'history', routes: routes});
new Vue(Vue.util.extend({router}, App)).$mount('#app');

在终端输入下面的命令：

1
2
php artisan serve

它会在8000端口开启服务器，在浏览器中输入http://localhost:8000即可工作。

创建Laravel后台

创建并注册三个组件

####