Laravel 中使用 Vue 组件化开发（配置）
20 / 35 / 创建于 8年前
cjjian 的个人博客
更多请关注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>3. 编译合并 JS 代码
在命令行下，输入：
gulp如需实时编译，可输入 gulp watch
步骤五：访问
最后通过浏览器访问：http://laravel.app/example
Laravel5.1 + Vue2.0 组件化配置
https://github.com/jcc/vue-laravel-example
更多请关注Laravel.so、PIGJIAN BLOG
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
『Laravel5.1 + Vue2.0 组件化配置』这个地址是不是贴错了，点了之后跳到 GitHub 那边去了
@Aufree :smile: thx
和超哥是什么关系？
Touch Me更多是接触我，抚摸我的意思 - 有道词典 。Touch Me该改为：Contact Metouch me该改为get in touch with me@cjjian 头像蛮酷，加你友链了，记得给 PHPHub 回加
@Summer Thx.Touch Me. 哈哈。:laughing:
@Summer 已加已改，感谢你的提议。
我前端不太明白额，mix.sass('app.scss'); 是在编译样式表吧，怎么直接去掉了换成 js 的了？
@qqjt 因为我这里没有写
sass样式，也没有用到，所以去掉，然后编译的时候就不会去编译assets/sass下的scss文件。 我这里只是用到了jshttps://github.com/jcc/vue-laravel-example Github 新增
Laravel 5.2+Vue 2.0 - rc.2例子你好，这个项目是有要求
node.js的版本的吗，我在运行gulp编译的时候，遇到两个报错：此错误在运行
npm install buble --save-dev后解决，但随即报另一个错误：有的说要更新node到6.x版本，我在更新node到6.7.0版本后，再次编译，仍然会报以上错误。
我自己找不出是什么原因了，希望能得到解答，thanks~~
@BoleLee 你更新版本后，是否有删除 node_modules 整个文件夹，再重新编译？
这样开发会不会很奇怪，配两个路由
@awh521 这样相当于前后端分离。做成 SPA.
@cjjian 没有删除，重新运行了
npm install，原来是需要全部依赖重新安装的呀，我再试试；更新node版本后，报错信息里还多了个
node-sass的错误，搜索相关问题后，发现是node版本问题，我是刚用nvm管理node的，不知道有没有这样的情况：同一项目里部分模块需要用node LTS版，部分需要node最新版，如果会的话，这种情况应该怎么处理呀？@BoleLee 报
node-sass的错，你可以尝试npm rebuild node-sass。如果你的 Node 是最新版，应该没什么问题的。我也尝试安装，是可以的，我的Node版本是v6.2.2,Npm版本是3.9.5，你可尝试删除node_modules重新npm install。@cjjian 用nvm切换到了6.7.0版本，重新
npm install(已经删除node_modules了)，装完后发现新的node_modules下有很多依赖，包括package.json里没有的（看起来觉得很杂），且发现装漏了laravel-elixir，同时报错：手动补充安装了
laravel-elixir后，执行gulp编译成功，使用本地服务器wamp配置DocumentRoot到public下后重启wamp服务，添加.env文件，内容同.env.example，执行命令php artisan key:generate生成APP_KEY，访问localhost，页面是空白的，vue组件那些都没有加载到，不知可能是什么原因？@BoleLee 这个问题需要你去看看控制台以及日志等，看报了什么错，你这样说，完全不知道是什么问题。
@cjjian 好的，谢谢了~
你这个步骤搞下去有问题，不知道是否有别的同学遇到问题？
@phpbruce 是什么样的问题？会报什么错？:expressionless:
谢谢你的分享，以后有问题希望能请教你
@贾济林 随时欢迎~:grin:
你好，我node6.9.4，cnpm 4.4.2，项目克隆下来直接cnpm install,看提示是拉下来了，然后gulp编译，但是他说有个laravel-elixir-vue组件没有找到，但是项目里面我看了这个是有的，还有个现象，assets下面那个main.js每行都报红，我是phpstom编辑器。请问你知道是什么问题么，另外希望能跟您请教，我的QQ 361525737，多谢
@贾济林 你好，出现这个问题的主要原因是你
install的过程中出了问题，你可以尝试用yarn替换，或者重新install。昨天那个问题解决了，我删除node组件然后重装，还是报错，我就单独把他说的那个组件装了，能跑起来了，目前在找一些laravel结合vue的项目，学习一下，谢谢你啊，你是我这方面你的启蒙者
@贾济林 互相学习学习~:metal:
@cjjian 你好，又要打扰你了，有些问题还要请教您，
export default{
data () {
return {
msg: 'Vue - Laravel - Example',
author: 'Jiajian Chan',
email: 'changejian@gmail.com'
}
}
}
这一段代码，我查了es6关于export default 的语法，还是没能理解 这段话是默认输出一个对象么？那么对象里面的data(){}又是什么意思呢？求帮忙解释一下，感谢
@cjjian
你好，又要打扰你了，有些问题还要请教您，
这一段代码，我查了es6关于export default 的语法，还是没能理解 这段话是默认输出一个对象么？那么对象里面的data(){}又是什么意思呢？求帮忙解释一下，感谢
@贾济林 建议你先看看 Vue 文档，
data只是换成ES6写法而已@贾济林 好像是 data: function() { ... }
hi 陈，感谢你的分享。有个问题, 如果我想分文件夹把js打包，mix.webpack()那里应该怎么写？
@SUNQ 很简单，你只需要设置打包的路径就行了。例如：
为什么我运行 gulp 报这个错 Elixir.ready is not a function ？？
大佬直到laravel5.5中修改Vue组件后,为什么浏览器没反应吗？？
@Baoyuan 这个是 5.1 的例子。你修改 vue 组件后要重新编译才能正常运行的。