laravel+vue结合使用
Laravel 中使用 Vue 组件化开发（配置）
- 赞 | 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>3. 编译合并 JS 代码
在命令行下，输入：
gulp如需实时编译，可输入 gulp watch
步骤五：访问
最后通过浏览器访问：http://laravel.app/example
Laravel5.1 + Vue2.0 组件化配置
https://github.com/jcc/vue-laravel-example
更多请关注Laravel.so、PIGJIAN BLOG
你可能感兴趣的文章
- 换一种思维看待PHP VS Node.js 1 收藏，1.5k 浏览
- JavaScript ES6 (五) - 集合 268 浏览
- 带你入门 JavaScript ES6 (五) 集合 305 浏览
jcc 作者 · 2016年08月20日
https://github.com/jcc/vue-la... Github 新增 Laravel 5.2 + Vue 2.0 - rc.2 例子
赞 回复
系列文章
- 终于来了！结合 Laravel 5.3 + vue 2.1 组件化开发的博客系统50 收藏， 12.8k 浏览
- PJ Blog 升级到 Laravel 5.43 收藏， 2.8k 浏览
- Laravel tap 用法 8 收藏， 1.6k 浏览
浙ICP备 15005796号-2 浙公网安备 33010602002000号 杭州堆栈科技有限公司版权所有
CDN 存储服务由 又拍云 赞助提供
laravel+vue结合使用的更多相关文章
- laravel+vue组合的项目中引入ueditor(打包成组件形式)
前言:最近写东西需要用到ueditor,并且需要是在vue组件中引入. (本博客默认你已经配置了laravel+vue的项目环境,如果还没有配置好的的小伙伴,可以看看我的另一篇博客,链接: http: ...
- Laravel+vue实现history模式URL可行方案
项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. h ...
- Laravel + Vue 之 OPTIONS 请求的处理
问题: 在 Vue 对后台的请求中,一般采用 axios 对后台进行 Ajax 交互. 交互发生时,axios 一般会发起两次请求,一次为 Options 试探请求,一次为正式请求. 由此带来的问题是 ...
- Laravel + Vue + Element 考勤应用 - 人力资源系统
项目地址 Bee 介绍 Bee 是人力资源系统中的考勤应用,主要功能用于员工申请假单.Bee具有较高的性能.扩展性等,其中包括前后端分离.插拔式的规则验证(验证器).数据过滤(装饰器).消息队列等,后 ...
- laravel vue.js的使用
安装cors 地址:https://github.com/barryvdh/laravel-cors 在Kernel文件中加上 protected $middleware = [ \Barryv ...
- laravel+vue+vuetify(下载图片到本地)
vue.js如何根据后台返回来的图片url进行图片下载 downloadByBlob(url,name) { let image = new Image() ...
- guzzle下载图片（laravel+vue）
先再laravel安装guzzle扩展包:composer require guzzlehttp/guzzle 之后再控制器操作: use GuzzleHttp\Client; //远程api数据的获 ...
- laravel+vue+vuetify 前端匹配不到数据记录 No matching records found
后端数据:使用guzzle获取api数据,(安装扩展包guzzle) use GuzzleHttp\Client; //获取请求远程产品信息需要的参数public function getParams ...
- 基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+
什么是ThinkSNS+ ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+.新的产品名 ...
随机推荐
- Python map/reduce/filter/sorted函数以及匿名函数
1. map() 函数的功能: map(f, [x1,x2,x3]) = [f(x1), f(x2), f(x3)] def f(x): return x*x a = map(f, [1, 2, 3, ...
- 【[APIO2012]派遣】
题目 直接线段树合并就好了 之后在线段树上二分贪心选取金额较少的 如果是左偏树的话就开一个大根堆,根和子树顺次合并,合并之后堆内所有元素总和如果大于\(m\)就删除堆顶,由于每个元素只会被删除一次,所 ...
- solidity开发之windows下配置remix本地环境遇到的问题及解决
本人按照这个教程配置remix本地环境.[https://cloud.tencent.com/developer/article/1374376] win+R打开管理员终端,在欲配置为本地目录的路径执 ...
- 一篇博客：分类模型的 Loss 为什么使用 cross entropy 而不是 classification error 或 squared error
https://zhuanlan.zhihu.com/p/26268559 分类问题的目标变量是离散的,而回归是连续的数值. 分类问题,都用 onehot + cross entropy traini ...
- Windows XP和Wndows7误删除了注册表下.exe文件夹之修复办法
在桌面空白处鼠标右击选择“新建-文本文档”,然后将下面的代码复制粘贴进去;如图所示: Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\. ...
- SSM命名规范框架
文件名 作用 src 根目录,没什么好说的,下面有main和test. main 主要目录,可以放java代码和一些资源文件. java 存放我们的java代码,这个文件夹要使用Build Path ...
- Android学习笔记_58_清除手机应用程序缓存
通过查看手机设置(setting)源代码,发现它里面获取应用大小和缓存大小是通过PackageManager里面的getPackageSizeInfo方法.然而此方法时私有的,因此通过反射调用此方法. ...
- python logging—模块
python logging模块 python logging提供了标准的日志接口,python logging日志分为5个等级: debug(), info(), warning(), error( ...
- js箭头函数
ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头 x =>x*x 相当于: function(x) { ...
- 菜鸟笔记 -- Chapter 6.4.2 详解继承
6.4.2 详解继承 6.4.2.1 继承入门 继承使得程序架构具有一定的弹性,在程序中复用一些已经定义完善的类不仅可以减少软件开发周期,也可以提高软件的可维护性和可扩展性.基本思想是基于某个父类 ...