laravel+vue结合使用-优快云博客

本文介绍了如何在Laravel 5.1中结合Vue 2.0进行组件化开发，详细阐述了从配置package.json，到gulpfile.js的调整，再到Vue组件的基础例子创建，路由定义以及JS代码的编译合并。通过这些步骤，读者可以学会如何在Laravel项目中集成并使用Vue进行前端开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SegmentFault

立即登录免费注册

在 SegmentFault，学习技能、解决问题

每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。

免费注册立即登录

Laravel 中使用 Vue 组件化开发（配置）

jcc 2016年08月18日发布

赞 | 8收藏 | 83
14.7k 次浏览

更多请关注Laravel.so、PIGJIAN BLOG

现今前端组件化开发、MVVM 模式，给开发带来了很多的便利，可读性、可维护性更高。然而自 Laravel 5.3 开始，VueJS 成为框架默认的标配。

本文基于 Laravel 5.1 LTS 版本引入 Vue 2.0 进行配置。

我已在 Github 配置好，Laravel 5.1 和 Laravel 5.2 均有，Clone 下来后按照 README 安装依赖后即可用：
https://github.com/jcc/vue-laravel-example

步骤一：配置 `package.json`

1. 在根目录下修改 package.json, 可在 devDependencies 下配置你所需的所有依赖。我的配置如下：

{
  "private": true,
  "scripts": {
    "prod": "gulp --production", "dev": "gulp watch" }, "devDependencies": { "bootstrap-sass": "^3.3.7", "gulp": "^3.9.1", "jquery": "^3.1.0", "laravel-elixir": "^6.0.0-9", "laravel-elixir-vue": "^0.1.4", "laravel-elixir-webpack-official": "^1.0.2", "laravel-elixir-browsersync-official": "^1.0.0", "lodash": "^4.14.0", "vue": "^2.0.0-rc.2", "vue-resource": "^0.9.3", "vue-router": "^2.0.0-rc.3" } }

2. 安装配置的依赖，在根目录下，运行：

npm install

当然你可以通过 npm install {package_name} --save-dev 的方式安装你所需的包。

步骤二：配置 `gulpfile.js`

Laravel 5.1 的 gulpfile.js 内容如下：

var elixir = require('laravel-elixir');

elixir(function(mix) { mix.sass('app.scss'); });

可见还没使用 ES6 的语法，因此我们修改如下：

const elixir = require('laravel-elixir');

require('laravel-elixir-vue'); elixir(mix => { mix.webpack('main.js'); });

mix.webpack('main.js') 是将 resources/assets/js 下的所有文件进行编译合并，合并到 public/js/main.js 文件。

步骤三：配置 `Vue` 并创建基础例子

1. 在 resources/assets 文件夹下创建 js/main.js 文件，该文件主要引入 vue 、vue-router 等所需的包。

main.js：

import Vue from 'vue/dist/vue.js'
import App from './App.vue' import VueRouter from 'vue-router' Vue.use(VueRouter) import Example from './components/Example.vue' const router = new VueRouter({ mode: 'history', base: __dirname, routes: [ { path: '/example', component: Example } ] }) new Vue(Vue.util.extend({ router }, App)).$mount('#app')

由于 vue-router 需要 Vue.js 0.12.10+ 并不支持 Vue.js 2.0，因此以上的是根据 vue-router v2.0.0+ 的版本配置，配置跟 0.12.10+ 有明显区别。

2. 在 js 文件夹下创建 App.vue 文件

App.vue：

<template>
  <div id="app"> <router-view></router-view> </div> </template>

3. 在 js 文件夹下创建 components/Example.vue 文件

Example.vue：

<template>
  <h1>{{ msg }}</h1> </template> <script> export default { data () { return { msg: 'This is a Example~!' } } } </script>

到此 vue 的配置已完成，接下来需要配置一下 Laravel, 让 Laravel 成功引导到 Vue

步骤四：定义路由、编译合并 `JS` 代码

1. 定义路由，在 app/Http/routes.php 加入：

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

2. 创建 example.blade.php 模板

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> </head> <body> <div id="app"></div> <script src="{{ asset('js/main.js') }}"></script> </body> </html>