在Laravel5.4中使用Vue2.1

2017-09-21 本文已影响824人乘瓠散人

在laravel5.4中已经内置了vuejs前端框架，这里介绍如何使用它们一起工作。
假设你已经安装好相关的依赖：

编辑routes/web.php

Route::get('/', function () {
    return view('welcome');
});

我们的首页将会显示welcome.blade.php这个页面。

修改resources/views/welcome.blade.php，修改页面的body部分

<body>
  <!-- vue的挂载点-->
   <div id='app'>
        <!--使用我们建立的组件-->
        <example></example>
   </div>
  <!--载入打包后的js-->
  <script src="js/app.js"></script>
</body>

建立resources/assets/js/components/Example.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">{{ name || '匿名'}}</div>
                    <div class="panel-body">
                        {{msg}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  props: ['name'],
  data () {
    return {
        msg: '这是laravel下的一个vue组件example.'
    }
  }
}
</script>

修改resources/assets/js/bootstrap.js
加入window.Vuw = require('vue');
修改resources/assets/js/app.js

require('./bootstrap');

import Example from './components/Example'
new Vue({
  el: '#app',
  components: { Example }
})

这个文件被打包后会在welcome.blade.php中被使用。
以上部分总共建立了三个文件

welcome.blade.php: laravel的样板页
Example.vue: vue单文件组件
app.js: 建立vue实体和注册vue组件

修改webpack.mix.js
接下来就是打包了，打包会把.vue组件和.js编译成一个独立的.js文件，由于我们require('./bootstrap')，所以其中的js也会被一起打包。laravel5.4引入了mix，比之前的laravel elixir更简单好用，它使用webpack来执行打包，相应的设置在webpack.mix.js中，现在我们修改其中的内容：

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

目的是把resources/assets/js/app.js打包后放到public/js/app.js

打包并执行
在cmd中切换到项目根目录，执行npm run dev或yarn run dev
这样就打包完成了。
接下来启动内置服务器php artisan serve
顺利的话就可以在localhost上看到相应页面了。
自动打包更新
由于我们必须打包后才能在网站上看到结果，这样每次对vue文件的修改后都要执行npm run dev，这样实在太没效率了，我们可以改用npm run watch或yarn run watch指令来自动打包更新。
发布
如果你想要开放public/js/app.js，由于它们是尚未被压缩的内容，而且引入了其它元件，文件大小有1MB多，这可不能拿来给实际的产品用。当你的网站要发布到产品服务器上时，必须使用npm run prod或yarn run prod 来进行打包压缩。

抽取组件
通常你的网站不会只有一页，因此你会在不同的页面建立不同的.vue和.js文件，但是它们都是使用同样的一些组件，当你打包时，这些相同的组件就会被重复打包在不同的.js文件中，浪费资源。
我们可以将这些会重复使用的组件抽取出来，封装成一个独立的文件，这样只会在第一次载入时多花一点时间，之后浏览器就可以很快地从中读取，不会重复下载相同的内容。
先来看看我们使用了哪些组件，打开resources/assets/js/bootstrap.js，看看全局变量请求了哪些组件，有lodash,jquery,axios以及我们加入的vue，我们要将这些组件抽取成为一个独立的文件。
首先，编辑webpack.mix.js，使用extract指令来抽取组件：

mix.js('resources/assets/js/hello.js', 'public/js')
   .extract(['lodash','jquery','axios','vue']);

这样当你打包时就会产生2个额外文件和一个自己写的文件：

public/js/manifest.js: webpack manifest runtime
public/js/vendor.js: 使用的组件全部打成一包
public/js/hello.js: 自己的js文件，这里是hello.js

之后我们要稍微调整一下welcome.blade.php的<script>部分：

<script src="js/manifest.js"></script>
<script src="js/vendor.js"></script>
<script src="js/app.js"></script>

为了避免JavaScript执行时发生错误，必须按照上面的顺序，自己的js放在最后载入。

这样就完成了组件的抽取。

不过，在laravel中，我们通常会使用layout将页面中的公共部分抽取出来。下面介绍laravel中layout的写法：
假设你有一个layout文件resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>@yield('title')</title>
</head>
<body>
    <div id="app">
        @yield('content')
    </div>
    <script src="/js/manifest.js"></script>
    <script src="/js/vendor.js"></script>
    @yield('script')
</body>
</html>

我们指定了三个准备填入的内容title，content，script .
接着修改resources/views/welcome.blade.php

@extends('layouts.app')

@section('title', 'Laravel With Vue Demo')

@section('content')
    <Hello name="Tony"></Hello>
    <Hello></Hello>
@endsection

@section('script')
    <script src="js/hello.js"></script>
@endsection

只要使用同一个layout的页面，内容差不多就是这样，并且原本写在这里的代码可以直接写到vue中了。

在Laravel5.4中使用Vue2.1

猜你喜欢

热点阅读