在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中了。
网友评论