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

现今前端组件化开发、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：

3. 在 js 文件夹下创建 components/Example.vue 文件
   Example.vue：
   到此 vue 的配置已完成，接下来需要配置一下 Laravel, 让 Laravel 成功引导到 Vue

步骤四：定义路由、编译合并 JS 代码

1. 定义路由，在 app/Http/routes.php 加入：

    Route::get('example', function () {
        return view('example');
    });
   

2. 创建 example.blade.php 模板

3. 编译合并 JS 代码
   在命令行下，输入：

    $ gulp
   

   如需实时编译，可输入 gulp watch

步骤五：访问

最后通过浏览器访问：http://laravel.app/example

Laravel5.1 + Vue2.0 组件化配置

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

from : http://laravel.so/tricks/7986d4d1e325f5ac849f14e47c36caa4