Laravel中使用Vue组件化开发（配置）

更多请关注Laravel.so、PIGJIAN BLOG

现今前端组件化开发、MVVM 模式&＃xff0c;给开发带来了很多的便利&＃xff0c;可读性、可维护性更高。然而自 Laravel 5.3 开始&＃xff0c;VueJS 成为框架默认的标配。

本文基于 Laravel 5.1 LTS 版本引入 Vue 2.0 进行配置。

我已在 Github 配置好&＃xff0c;Laravel 5.1 和 Laravel 5.2 均有&＃xff0c;Clone 下来后按照 README 安装依赖后即可用&＃xff1a;
https://github.com/jcc/vue-laravel-example

步骤一&＃xff1a;配置 package.json

1. 在根目录下修改 package.json, 可在 devDependencies 下配置你所需的所有依赖。我的配置如下&＃xff1a;

{"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. 安装配置的依赖&＃xff0c;在根目录下&＃xff0c;运行&＃xff1a;

npm install

当然你可以通过 npm install {package_name} --save-dev 的方式安装你所需的包。

步骤二&＃xff1a;配置 gulpfile.js

Laravel 5.1 的 gulpfile.js 内容如下&＃xff1a;

var elixir &＃61; require(&＃39;laravel-elixir&＃39;);elixir(function(mix) {mix.sass(&＃39;app.scss&＃39;);
});

可见还没使用 ES6 的语法&＃xff0c;因此我们修改如下&＃xff1a;

const elixir &＃61; require(&＃39;laravel-elixir&＃39;);require(&＃39;laravel-elixir-vue&＃39;);elixir(mix &＃61;> {mix.webpack(&＃39;main.js&＃39;);
});

mix.webpack(&＃39;main.js&＃39;) 是将 resources/assets/js 下的所有文件进行编译合并&＃xff0c;合并到 public/js/main.js 文件。

步骤三&＃xff1a;配置 Vue 并创建基础例子

1. 在 resources/assets 文件夹下 创建 js/main.js 文件&＃xff0c;该文件主要引入 vue 、vue-router 等所需的包。

main.js&＃xff1a;

import Vue from &＃39;vue/dist/vue.js&＃39;
import App from &＃39;./App.vue&＃39;
import VueRouter from &＃39;vue-router&＃39;Vue.use(VueRouter)import Example from &＃39;./components/Example.vue&＃39;const router &＃61; new VueRouter({mode: &＃39;history&＃39;,base: __dirname,routes: [{ path: &＃39;/example&＃39;, component: Example }]
})new Vue(Vue.util.extend({ router }, App)).$mount(&＃39;#app&＃39;)

由于 vue-router 需要 Vue.js 0.12.10&＃43; 并不支持 Vue.js 2.0&＃xff0c;因此以上的是根据 vue-router v2.0.0&＃43; 的版本配置&＃xff0c;配置跟 0.12.10&＃43; 有明显区别。

2. 在 js 文件夹下创建 App.vue 文件

App.vue&＃xff1a;

3. 在 js 文件夹下创建 components/Example.vue 文件

Example.vue&＃xff1a;

到此 vue 的配置已完成&＃xff0c;接下来需要配置一下 Laravel, 让 Laravel 成功引导到 Vue

步骤四&＃xff1a;定义路由、编译合并 JS 代码

1. 定义路由&＃xff0c;在 app/Http/routes.php 加入&＃xff1a;

Route::get(&＃39;example&＃39;, function () {return view(&＃39;example&＃39;);
});

2. 创建 example.blade.php 模板

3. 编译合并 JS 代码

在命令行下&＃xff0c;输入&＃xff1a;

gulp

如需实时编译&＃xff0c;可输入 gulp watch

步骤五&＃xff1a;访问

最后通过浏览器访问&＃xff1a;http://laravel.app/example

Laravel5.1 &＃43; Vue2.0 组件化配置

https://github.com/jcc/vue-laravel-example

更多请关注Laravel.so、PIGJIAN BLOG