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+.新的产品名 ...
随机推荐
- mysql数据库 BETWEEN 语法的用法和边界值解析
between用法: 用于where表达式中,选取两个值之间的数据,如: SELECT id FROM user WHERE id BETWEEN value1 AND value2; 当betwee ...
- Android（java）学习笔记41：Map集合功能概述
1. 下面通过代码引入Map集合: 如下 package cn.itcast_01; import java.util.HashMap; import java.util.Map; /* * 作为学生 ...
- 【[TJOI2017]城市】
题目 好像\(noip\)之前做某雅礼的题的时候看到过这道题的数据范围增强版 当时那道题数据范围是\(3e5\)感觉神仙的一批 这道题数据范围\(5e3\)那岂不是可以\(O(n^2)\)水过 有一点 ...
- css盒模型－BFC
BFC(边距重叠解决方案) 1.BFC的基本概念:块级格式化上下文 2.BFC的原理(说白了就是BFC的渲染规则): 这个规则是什么呢?我觉得大家能说出4点就够了 第一个就是BFC可以解决这个元素的垂 ...
- ProjectServer如何让系统管理员模拟普通用户创建自己的时间表
public bool ProcessTimesheet(Guid siteGuid, Guid tsGuid, string lcid, string userName, bool submitSt ...
- Object C学习笔记20-结构体(转)
在学习Object C中的过程中,关于struct的资料貌似非常少,查阅了C方面的资料总结了一些学习心得! 一. 定义结构 结构体是一种数据类型的组合和数据抽象.结构体的定义语法如下: struct ...
- 自定义App首次启动引导页
代码如下 #import"ZBGuidePageView.h" @interfaceZBGuidePageView()<UIScrollViewDelegate> @p ...
- Angularjs基础(四)
AngularJS过滤器 过滤器可以使用一个管道符(|)添加到表达式和指令中. AngularJS过滤器可用于转换数据: currency 格式化数字为货币格式 filter 从数组中选着应子集. l ...
- ABAP术语-Authorization
Authorization 原文:http://www.cnblogs.com/qiangsheng/archive/2007/12/18/1004059.html Authority to exec ...
- JVM——Java内存区域
一,概述: Java跟C++不同,在内存管理区域C++程序员拥有着最高权力,但是正是因为如此,所以C++程序员要照顾这个对象的生老病死,从创建到消亡都是由程序员决定的. 但是Java程序员在虚拟机的自 ...