Laravel 中使用 Vue 组件化开发(配置)

更多请关注Laravel.soPIGJIAN BLOG

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

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

我已在 Github 配置好,Laravel 5.1Laravel 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.1gulpfile.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

vue-laravel-example

Laravel5.1 + Vue2.0 组件化配置
https://github.com/jcc/vue-laravel-example

更多请关注Laravel.soPIGJIAN BLOG

本作品采用《CC 协议》,转载必须注明作者和本文链接
Nothing is impossible. —— @Jiajian Chan
本帖由系统于 6年前 自动加精
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 35

『Laravel5.1 + Vue2.0 组件化配置』这个地址是不是贴错了,点了之后跳到 GitHub 那边去了

7年前 评论
Summer

和超哥是什么关系?

Touch Me 更多是接触我,抚摸我的意思 - 有道词典

  1. 第一个 Touch Me 该改为:Contact Me
  2. 第二个 touch me 该改为 get in touch with me

file

7年前 评论
Summer

@cjjian 头像蛮酷,加你友链了,记得给 PHPHub 回加

7年前 评论

@Summer Thx.Touch Me. 哈哈。:laughing:

7年前 评论

@Summer 已加已改,感谢你的提议。

7年前 评论

我前端不太明白额,mix.sass('app.scss'); 是在编译样式表吧,怎么直接去掉了换成 js 的了?

7年前 评论

@qqjt 因为我这里没有写 sass 样式,也没有用到,所以去掉,然后编译的时候就不会去编译 assets/sass 下的 scss 文件。 我这里只是用到了 js

7年前 评论

你好,这个项目是有要求node.js的版本的吗,我在运行gulp编译的时候,遇到两个报错:

ERROR in Entry module not found: Error: can't resolve buble in ...

此错误在运行npm install buble --save-dev后解决,但随即报另一个错误:

...\vue-laravel-example\node_modules\laravel-elixir-webpack-official\node_modules\webpack\node_modules\loader-runner\lib\loadLoader.js:35
                        throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");
                        ^

Error: Module '...\vue-laravel-example\node_modules\buble\dist\buble.umd.js' is not a loader (must have normal or pitch function)
...

有的说要更新node到6.x版本,我在更新node到6.7.0版本后,再次编译,仍然会报以上错误。
我自己找不出是什么原因了,希望能得到解答,thanks~~

7年前 评论

@BoleLee 你更新版本后,是否有删除 node_modules 整个文件夹,再重新编译?

7年前 评论

这样开发会不会很奇怪,配两个路由

7年前 评论

@awh521 这样相当于前后端分离。做成 SPA.

7年前 评论

@cjjian 没有删除,重新运行了npm install,原来是需要全部依赖重新安装的呀,我再试试;
更新node版本后,报错信息里还多了个node-sass的错误,搜索相关问题后,发现是node版本问题,我是刚用nvm管理node的,不知道有没有这样的情况:同一项目里部分模块需要用node LTS版,部分需要node最新版,如果会的话,这种情况应该怎么处理呀?

7年前 评论

@BoleLeenode-sass 的错,你可以尝试 npm rebuild node-sass 。如果你的 Node 是最新版,应该没什么问题的。我也尝试安装,是可以的,我的 Node 版本是 v6.2.2 , Npm 版本是 3.9.5 ,你可尝试删除 node_modules 重新 npm install

7年前 评论

@cjjian 用nvm切换到了6.7.0版本,重新npm install(已经删除node_modules了),装完后发现新的node_modules下有很多依赖,包括package.json里没有的(看起来觉得很杂),且发现装漏了laravel-elixir,同时报错:

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "D:\\nodejs\\node.exe" "D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v6.7.0
npm ERR! npm  v3.10.3
npm ERR! code ELIFECYCLE

npm ERR! node-sass@3.10.1 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@3.10.1 postinstall script 'node scripts/build.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the node-sass package,
npm ERR! not with npm itself.

手动补充安装了laravel-elixir后,执行gulp编译成功,使用本地服务器wamp配置DocumentRootpublic下后重启wamp服务,添加.env文件,内容同.env.example,执行命令php artisan key:generate生成APP_KEY,访问localhost,页面是空白的,vue组件那些都没有加载到,不知可能是什么原因?

7年前 评论

@BoleLee 这个问题需要你去看看控制台以及日志等,看报了什么错,你这样说,完全不知道是什么问题。

7年前 评论

@cjjian 好的,谢谢了~

7年前 评论

你这个步骤搞下去有问题,不知道是否有别的同学遇到问题?

7年前 评论

@phpbruce 是什么样的问题?会报什么错?:expressionless:

7年前 评论
毛仔

谢谢你的分享,以后有问题希望能请教你

7年前 评论
毛仔

你好,我node6.9.4,cnpm 4.4.2,项目克隆下来直接cnpm install,看提示是拉下来了,然后gulp编译,但是他说有个laravel-elixir-vue组件没有找到,但是项目里面我看了这个是有的,还有个现象,assets下面那个main.js每行都报红,我是phpstom编辑器。请问你知道是什么问题么,另外希望能跟您请教,我的QQ 361525737,多谢

7年前 评论

@贾济林 你好,出现这个问题的主要原因是你 install 的过程中出了问题,你可以尝试用 yarn 替换,或者重新 install

7年前 评论
毛仔

昨天那个问题解决了,我删除node组件然后重装,还是报错,我就单独把他说的那个组件装了,能跑起来了,目前在找一些laravel结合vue的项目,学习一下,谢谢你啊,你是我这方面你的启蒙者

7年前 评论
毛仔

@cjjian 你好,又要打扰你了,有些问题还要请教您,

export default{
data () {
return {
msg: 'Vue - Laravel - Example',
author: 'Jiajian Chan',
email: 'changejian@gmail.com'
}
}
}

这一段代码,我查了es6关于export default 的语法,还是没能理解 这段话是默认输出一个对象么?那么对象里面的data(){}又是什么意思呢?求帮忙解释一下,感谢

7年前 评论
毛仔

@cjjian
你好,又要打扰你了,有些问题还要请教您,

        export default{
        data () {
        return {
        msg: 'Vue - Laravel - Example',
        author: 'Jiajian Chan',
        email: 'changejian@gmail.com'
        }
        }
        }

这一段代码,我查了es6关于export default 的语法,还是没能理解 这段话是默认输出一个对象么?那么对象里面的data(){}又是什么意思呢?求帮忙解释一下,感谢

7年前 评论

@贾济林 建议你先看看 Vue 文档data 只是换成 ES6 写法而已

7年前 评论

@贾济林 好像是 data: function() { ... }

7年前 评论

hi 陈,感谢你的分享。有个问题, 如果我想分文件夹把js打包,mix.webpack()那里应该怎么写?

6年前 评论

@SUNQ 很简单,你只需要设置打包的路径就行了。例如:

mix.js('resources/assets/js/app.js', 'public/js/main')
   .js('resources/assets/js/home.js', 'public/js/particals');
6年前 评论

为什么我运行 gulp 报这个错 Elixir.ready is not a function ??

6年前 评论

大佬直到laravel5.5中修改Vue组件后,为什么浏览器没反应吗??

5年前 评论

@Baoyuan 这个是 5.1 的例子。你修改 vue 组件后要重新编译才能正常运行的。

5年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!