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+.新的产品名 ...
随机推荐
- Git 还没push 前可以做的事(转)
Git 版本控制系統(3) 還沒 push 前可以做的事 转载:http://ihower.tw/blog/archives/2622 這一集要講的是:還沒 push 前可以做的壞事,也就是 re ...
- sublime重构变量
选中变量后按下Ctrl+D可批量修改变量名
- Android学习笔记_35_PopupWindow泡泡窗口的实现及GridView应用
1.PopupWindow是一个可以显示在当前Activity之上的浮动容器,PopupWindow弹出的位置是能够改变的,按照有无偏移量,可以分为无偏移和有便宜两种:按照参照对象的不同又可以分为两种 ...
- o'Reill的SVG精髓（第二版）学习笔记——第七章
第七章:路径 所有描述轮廓的数据都放在<path>元素的d属性中(d是data的缩写).路径数据包括单个字符的命令,比如M表示moveto,L表示lineto.接着是该命令的坐标信息. 7 ...
- CSS实战2
1. 鼠标样式 Cursor: pointer 鼠标变成小手 Cursor: default; 小白 Cursor : move; 移动 Cursor : text ; 文本输入 网 ...
- linux mariadb
https://www.linuxidc.com/Linux/2016-03/128880.htm -- sql 导入 接着输入你所导入到Centos下的数据库文Student.sql文件的位置例如: ...
- TCP和UDP的现实应用
以下应用的区分是基于TCP可靠传输,UDP不可靠传输 TCP一般用于文件传输(FTP HTTP 对数据准确性要求高,速度可以相对慢),发送或接收邮件(POP IMAP SMTP 对数据准确性要求高,非 ...
- 为什么你的 App 没人用？请按这8条逐一对照
为什么你的 App 没人用?请按这8条逐一对照 Kamo Asatryan 可能是这个世界上关注创新生态系统最多的一些人之一,他观察过数百个移动端 App,深入思考过它们的运行机制,并为它们的快速增长 ...
- TabbarController进行模块分类和管理
iOS-CYLTabBarController[好用的TabbarController] 用TabbarController进行模块分类和管理,这里推荐一个CYLTabBarController, ...
- Linux 下文件压缩与解压命令详解
tar 命令 -c 建立压缩档案 -x 解压 -t 查看内容 -r 向压缩归档文件末尾追加文件 -u 更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中 ...