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+.新的产品名 ...
随机推荐
- LeetCodeOJ刷题之15-16【3Sum（三数和问题）】
本文为两个题:[三数和(3Sum)]与[最近三数和(3Sum Closest)]问题 第一部分分析3Sum问题,第二部分分析3Sum Closest问题,由于两个问题的思路很像,所以这里放到一起分析. ...
- IOS MapKit框架的使用(专门用于地图显示)
● MapKit框架使用前提 ● 导入框架 ● 导入主头文件#import <MapKit/MapKit.h> ● MapKit框架使用须知 ● MapKit框架中所有数据类型的前 ...
- 异常：Caused by: java.lang.NoSuchMethodError: javax.persistence.OneToMany.orphanRemoval()Z
Spring3.0 + Hibernate3.5:启动服务器报:Caused by: java.lang.NoSuchMethodError: javax.persistence.OneToMany. ...
- POJ 1191 棋盘分割 【DFS记忆化搜索经典】
题目传送门:http://poj.org/problem?id=1191 棋盘分割 Time Limit: 1000MS Memory Limit: 10000K Total Submission ...
- 【luogu P2002 消息扩散】 题解
题目链接:https://www.luogu.org/problemnew/show/P2002 缩点把原图变为DAG,再在DAG上判断找入度为0的点的个数. 注意一点出度为0的点的个数不等于入度为0 ...
- Android学习笔记_15_网络通信之文件断点下载
一.断点下载原理: 使用多线程下载文件可以更快完成文件的下载,多线程下载文件之所以快,是因为其抢占的服务器资源多.如:假设服务器同时最多服务100个用户,在服务器中一条线程对应一个用户,100条线程在 ...
- 消息中间件JMS(二)
之前介绍了ActiveMQ下载与安装,并且启动了.下面进行ActiveMQ的Demo 1. JMS入门Demo 1.1 点对点模式 点对点模式主要建立在一个队列上面,当连接一个队列的时候,发送端不需要 ...
- 使用fir.im和蒲公英进行测试的一些注意事项
前言:使用fir.im和蒲公英进行测试的一些注意事项 最近公司的项目遇到了一个问题,有的用户的手机系统版本低于9.3高于9.0的存在崩溃的情况,8.x的系统的用户的有的界面的显示有问题(比如说图片严重 ...
- Linux查看日志命令- more、less、tail、head命令的区别
参考:https://blog.csdn.net/caib1109/article/details/52195942 1.more 2.tail 3.less 4.cat 5.head
- 我的第一个Python程序
#我的第一个Python程序 def is_valid_date(strdate): #判断是否是一个有效的日期字符串 try: #判断是否是时间格式 if ":" in strd ...