LARAVEL 中使用 VUE 组件化开发例子-Php框架模板-Php教程-壹聚教程网LARAVEL 中使用 VUE 组件化开发例子
下面我们来看一篇关于LARAVEL 中使用 VUE 组件化开发例子，希望这篇文章能够对各位带来帮助，具体的如下文介绍。
现今前端组件化开发、MVVM 模式，给开发带来了很多的便利，可读性、可维护性更高。然而自 Laravel 5.3 开始，VueJS 成为框架默认的标配。
本文基于 Laravel 5.1 LTS 版本引入 Vue 2.0 进行配置。
我已在 Github 配置好，Clone 下来后按照 README 安装依赖后即可用：
htt:///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 等所需的包。
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 文件
&template&
& &div id=&app&&
&&& &router-view&&/router-view&
&/template&
3. 在 js 文件夹下创建 components/Example.vue 文件
Example.vue：
&template&
& &h1&{{ msg }}&/h1&
&/template&
& export default {
&&& data () {
&&&&& return {
&&&&&&& msg: 'This is a Example~!'
到此 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&&
& &meta charset=&UTF-8&&
& &title&Example&/title&
& &div id=&app&&&/div&
& &script src=&{{ asset('js/main.js') }}&&&/script&
3. 编译合并 JS 代码
在命令行下，输入：
如需实时编译，可输入 gulp watch
步骤五：访问
最后通过浏览器访问：http://laravel.app/example
上一页： &&&&&下一页：相关内容开发环境：
Homestead + 5.3 + vue2 + vue-resource1 + vue-router2 + vuex2
源码放在 github 上面，
环境安装就不做介绍了，由于 5.3 自带 vue2 和 vue-resource，但是需要安装 vue-route 和 vuex。
在 package.json 中添加
“devDependencies”: {
“bootstrap-sass”: &#.7″,
“extract-text-webpack-plugin”: &#.0-beta.4″,
“gulp”: &#.1″,
“jquery”: &#.0″,
“laravel-elixir”: &#.0-9″,
“laravel-elixir-vue-2″: &#.0″,
“laravel-elixir-webpack-official”: &#.2″,
“lodash”: &#.2″,
“vue”: &#.1″,
“vue-resource”: &#.3″,
“vue-router”: &#.1″,
“vuex”: &#.0″
执行 npm install 安装
介绍下开发的需求，主要有三个页面：
首页展示推荐新闻
入口文件 app.js
resources/asserts/js/app.js
from ‘vue’;
import Resource from ‘vue-resource’;
.use(VueResource);
import VueRouter from ‘vue-router’;
Vue.use(VueRouter);
import store from ‘./store/’;
import routes from ‘routes’;
const router = new VueRouter({
var vm = new Vue({
}).$mount(‘#app’);
vuex 我们使用多模块的开发模式，这在项目中设计十分有必要的，如果把所有的数据一个实例上面，管理显得还是十分的混乱。
resources/asserts/store/index.js
import Vue from ‘vue’;
import Vuex from ‘vuex’;
import news from ‘./news’;
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
书写 news 模块代码
resources/asserts/store/news.js
import api from ‘../api’;
export default{
recommend: [],
lists: [],
detail: {}
mutations: {
SETRECOMMEND(state, recommend) {
state.recommend =
SETLISTS(state, lists) {
state.lists =
SETDETAIL(state, detail) {
state.detail =
actions: {
GETDETAIL({commit}, id) {
api.getNewsDetail(id).then(function(res) {
commit(‘SETDETAIL’, res.data);
document.body.scrollTop = 0;
GETRECOMMEND({commit}) {
api.getNewsRecommend().then(function(res) {
commit(‘SETRECOMMEND’, res.data);
GETLISTS({commit}) {
api.getNewsLists().then(function(res) {
commit(‘SETLISTS’, res.data);
看到上面的代码中引入了 api ，我将接口的请求全部放到 api.js 中，便于管理，其实这里也可以分成模块。
resources/asserts/api.js
import Vue from ‘vue’;
import VueResource from ‘vue-resource’;
Vue.use(VueResource);
的 csrfToken
Vue.http.interceptors.push((request, next) =& {
request.headers.set(‘X-CSRF-TOKEN’, .csrfToken);
const API_ROOT = ”;
export default({
getNewsRecommend: function() {
return Vue.resource(API_ROOT + ‘/news’).get();
getNewsLists: function() {
return Vue.resource(API_ROOT + ‘/newslist’).get();
getNewsDetail: function(id) {
return Vue.resource(API_ROOT + ‘/newsdetail/’ + id).get();
路由信息 routes.js
resources/asserts/js/routes.js
export default[
{ path: ”, redirect: ‘/index’ },
{ path: ‘/index’, component: require(‘./page/App.vue’) },
{ path: ‘/newslist’, component: require(‘./page/List.vue’) },
{ path: ‘/newsdetail/:id’, component: require(‘./page/Detail.vue’) }
组件 App.vue
resources/asserts/js/page/App.vue
&首页推荐&
class=“list-group”&
class=“list-group-item”
v-for=“row in recommend”&
:to=“{path:’/newsdetail/’ + row.id}”&
{{ row.title }}
class=“list-group-item”&
to=“/newslist”&更多&
import { mapState, mapActions } from ‘vuex’;
export default({
computed: mapState({
recommend: state =& state.news.recommend
created() {
this.GETRECOMMEND();
methods: {
…mapActions([
‘GETRECOMMEND’
组件 List.vue
resources/asserts/js/page/List.vue
&列表信息&
class=“list-group”&
class=“list-group-item”
v-for=“row in lists”&
:to=“{path:’/newsdetail/’ + row.id}”&
{{ row.title }}
import { mapState, mapActions } from ‘vuex’;
export default({
computed: mapState({
lists: state =& state.news.lists
created() {
this.GETLISTS();
methods: {
…mapActions([
‘GETLISTS’
组件 Detail.vue
resources/asserts/js/page/Detail.vue
class=“table table-bordered”&
width=“20%”&ID&
&{{ detail.id }}&
width=“20%”&标题&
&{{ detail.title }}&
width=“20%”&内容&
&{{ detail.content }}&
width=“20%”&创建时间&
&{{ detail.created_at }}&
import { mapState, mapActions } from ‘vuex’;
export default({
computed: mapState({
detail: state =& state.news.detail
created() {
var id = this.$route.params.
this.GETDETAIL(id);
methods: {
…mapActions([
‘GETDETAIL’
resources/views/welcome.blade.php
&!DOCTYPE html&
lang=“en”&
charset=“utf-8″&
http-equiv=“X-UA-Compatible” content=“IE=edge”&
name=“viewport” content=“width=device-width, initial-scale=1″&
rel=“stylesheet” href=“/css/bootstrap.min.css”&
id=“app” class=“container”& class=“view”&&
type=“text/javascript”&
var Laravel = {
csrfToken: ‘{{ csrf_token() }}’
src=“/js/app.js”&&
服务端 API
服务端的 api 只是一个数据的模拟，没有做深入的开发
routes/web.php
Route::get(‘/news’, function() {
[‘id’ =& 1, ‘title’ =& ‘new1′],
[‘id’ =& 2, ‘title’ =& ‘new2′],
[‘id’ =& 3, ‘title’ =& ‘new3′],
[‘id’ =& 4, ‘title’ =& ‘new4′],
Route::get(‘/newslist’, function() {
[‘id’ =& 1, ‘title’ =& ‘new1′],
[‘id’ =& 2, ‘title’ =& ‘new2′],
[‘id’ =& 3, ‘title’ =& ‘new3′],
[‘id’ =& 4, ‘title’ =& ‘new4′],
Route::get(‘/newsdetail/{id}’, function($id) {
‘id’ =& 1,
‘title’ =& ‘news’,
‘content’ =& ‘content’,
‘created_at’ =& date(‘Y-m-d H:i:s’)
php artisan serve // 开启 web
gulp // 打包前端资源，开发的时候用 gulp watch 监听实时浏览
打开浏览器，访问
查看效果。
这个例子只是简单的使用了 Laravel 和 vue，详细开发请查看官方文档。
未经允许不得转载： &2796人阅读
积累经验（8）
& 首先表示折腾了十来天的php-laravel框架和vue的结合开发又偏前端实在是太大的阻碍,首先laravel的机制就是写完路由router再加载blade模板的.如果要在laravel工程里面加载一个.vue文件,必须通过一个 blade模板再导入vue.js.
& 近期接触了前端较前卫的思想,那就是压缩打包代码+组件化开发.
这种思路就由不得传统的html的前端静态代码的,传统的静态项目的代码是这样的:
而这样子很不利与组件化开发, 换言之就是改动了一处,需要凭记忆+个人能力+注释清楚来修改其他文件(如果改的不只是一处的话,那对于维护web的程序员来讲简直是噩梦)
于是前端有个很厉害的东西叫:脚手架,在vue里就是vue cli&
这玩意只要一句init的命令行就能生成一堆项目的文件,开发起来相当方便
用的webpack,就输入
npm build dev
& 一句话就能：
压缩打包编译丢给服务器就能上线了你信不信
那为什么还要依赖这个laravel呢?
那真的是因为laravel这个特殊的机制了:必须编写路由+模板! &必须编写路由+模板! &必须编写路由+模板!
那如果在laravel工程下开发前端,那真是的死了算了
每一次写完代码要用gulp watch 来动态编译然后打包(别以为我不知道,打包出来的最后的东东就是js的eval(代码处))
加上apache缓存/laravel缓存服务/浏览器缓存/
往往你get到的 只是你改代码的上一次的请求 &我想说,这样的开发,我!不!要!
再说说解决开发时的老大难的问题:跨域;
在这方面前端是怎么做到完全脱离后台的呢,
解决方法是:用在本地开启服务器请求代理的方式来跟远端服务器通讯;
据说:服务器之间的通讯是不需要跨域的
神器来了:http-proxy-middleware! ==&一个node开发的代理发出http请求的中间件
神器自行百度!
----------------------------------------------------------------------------------------------------------------------------------------------------------
前端开发完全分离总结:
1:一个优秀的组件化开发框架(非必须),如vue 理由:自动生成工程目录+实时编译+打包压缩+es6语法检查+stylus解析+自动化单元测试工具kram(咋写忘了)+etc..
2:一个优秀的跨域解决方案,如vue cli-proxyTable(基于http-proxy-middleware)
3:一个走过弯路(碰过后端代码甚至想改后端代码)然后开发思路才变得很清晰的前端程序员!
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：20973次
排名：千里之外
原创：11篇
(1)(1)(2)(6)(1)在laravel中使用vuejs的UI（element-UI）组件时是直接复制到到页面中还是弄成.vue文件？
在laravel中使用vuejs的UI（element-UI）组件时是直接复制到到页面中还是弄成.vue文件？
在laravel 5.3中使用element-UI，不是使用前后端分离的方式开发，先按照这篇文章进行了配置http://codesky.me/archives/tr...demo已经正常显示，即welcome.blade.php是下面这样的：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Example&/title&
&div id="app"&
&example&&/example&
&el-button&Hello&/el-button&
&script src="{{ asset('js/app.js') }}"&&/script&
1、思路仍然有点混乱，不知道element-UI组件该怎么使用，比如要使用下面这个开关http://element.eleme.io/#/zh-... 组件代码应该放哪里？是弄成.vue文件还是直接在页面需要的位置写？
&el-switch
v-model="value1"
on-text=""
off-text=""&
&/el-switch&
&el-switch
v-model="value2"
on-color="#13ce66"
off-color="#ff4949"&
&/el-switch&
export default {
value1: true,
value2: true
2、这种js渲染的表单类元素，要提交的时候可以用传统方式提交吗？还是只能用ajax提交？
不管是前后端完全分离还是前后端混合，都可以使用.vue, 而且很方便, 所以我觉得最佳实践是写成.vue, 包括页面所有其他js, 都由app.js入口统一加载, 再在build的时候编译. 这样可以方便以后维护和重构.
怎么提交和js渲染没有任何关系, 你用传统的方式写&button type="submit"&就可以让浏览器帮你提交表单. 你监听浏览器事件, 就能在js中做各种操作, 比如ajax提交
附：在app.js中加载.vue文件为全局组件, 如<ponent('post-page', require('./components/PostPage')), 就可以在blade模版中使用&post-page&&/post-page&,而且Elixir会帮你搞定一切配置, 只需要一行mix.webpack('path/to/app.js')即可
前后端不分离的话.vue文件你不用vue-loader之类的编译，浏览器不认识吧
前后端不分离的原因是不愿意舍弃后端框架带来的各种便利，比如路由，模板，布局等等。这样使用vue，就只能舍弃.vue单独文件。要使用vue.js及各种组件库，如emement ui，可以这样！一，可以像引入jquery那样引入vue.js。二，整体导入element.js及全局的css，并在vue中引用。三，配合后端的模板布局功能，在局部的模板文件中书写&el-button&等组件。这样用就不再是单页面的应用了，因为后台在路由页面时，会自动调用基础的总体布局模板，这样就会自动重新初始化一个新的vue对象。不过有后台的session，config等功能，共享数据邀功不是问题。目前正在使用上述方式进行vue+element ui+thinkphp5的测试，虽然失去了单文件应用的诸如按需加载等特性，但同时在别的方便也获得了益处。
Copyright & 2016 phpStudy}