前端里首先这里省略安装Laravel的步骤，直接laravel new blog。
如果你是中国大陆用户，可以尝试这个composer镜像：http://pkg.phpcomposer.com。
如果在new之后发生了Warning（嗯，反正我每次都遇到了OTZ）
Warning:require(/Users/SkyAo/blog/bootstrap/../vendor/autoload.php): failed to open stream:No such file or directory in/Users/SkyAo/blog/bootstrap/autoload.php on line 17Fatal error:require():Failed opening required '/Users/SkyAo/blog/bootstrap/../vendor/autoload.php'(include_path='.:')in/Users/SkyAo/blog/bootstrap/autoload.php on line 17PHP Warning:require(/Users/SkyAo/blog/bootstrap/../vendor/autoload.php): failed to open stream:No such file or directory in/Users/SkyAo/blog/bootstrap/autoload.php on line 17PHP Fatal error:require():Failed opening required '/Users/SkyAo/blog/bootstrap/../vendor/autoload.php'(include_path='.:')in/Users/SkyAo/blog/bootstrap/autoload.php on line 17Script php artisan optimize handling the post-install-cmd event returned with error code 255
接下来就只能手动继续执行：composer install和php artisan key:generate，否则如果一切顺利，接下来使用php artisan serve就能够成功启动了。
由于官方包依旧存在问题，在gulp --production会报错，所以我们要修改package.json中的laravel-elixir-webpack-official，改为：
"laravel-elixir-webpack-official":"https://github.com/SebastianS90/laravel-elixir-webpack-official/tarball/22a3805996dfb7ca3e4137e9bdcb29232ba9f519"
接下来，由于我们需要使用到Vue，首先运行npm install安装相关依赖。（截止2016年10月06日，本行撰写时，Laravel已经将依赖换成Vue2套装，不必人工修改依赖。
接下来，安装一些Element需要的包，首先当然是他自己：cnpm install --save element-ui。
接下来安装一些我们需要的额外的loaders：
cnpm install --save-dev css-loader style-loader vue-loader babel-loader babel-core
全部安装完成后，配置一下gulpfile中的webpack：
const path = require('path');require('laravel-elixir-webpack-official');
laravel-elixir-webpack-official版本小于1.0.9：
然后在注释后加入：
Elixir.webpack.config.module.loaders =[];Elixir.webpack.mergeConfig({resolveLoader:{root: path.join(__dirname,'node_modules'),},module:{loaders:[{test:/\.js$/,loader:'babel',exclude:/node_modules/},{test:/\.css$/,loader:'style!css'}]}});
这里因为mergeConfig方法会追加而不会覆盖包内的配置信息，而buble会导致无法正常的编译，所以我们只能直接覆盖掉配置，比较无奈，向该包作者提了一个issue，期待有更好的方法。
laravel-elixir-webpack-official版本大于等于1.0.9：
elixir(mix =>{// Elixir.webpack.config.module.loaders = [];Elixir.webpack.mergeConfig({resolveLoader:{root: path.join(__dirname,'node_modules'),},module:{loaders:[{test:/\.css$/,loader:'style!css'}]}});mix.sass('app.scss').webpack('app.js');});
之后在resources/assets/js/app.js中我们加入：
importElementUI from 'element-ui';import'element-ui/lib/theme-default/index.css';Vue.use(ElementUI);
把resources/views/welcome.blade.php改为：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Example</title></head><body><divid="app"><example></example><el-button>Hello</el-button></div><scriptsrc="{{ asset('js/app.js') }}"></script></body></html>
运行命令gulp watch和php artisan serve。
等待编译完成后，我们就能看到正确的结果了。
当然，你可以直接引入一个App.vue文件，使用它来进行前后端分离式的开发。
则app.js大概像这样：
importApp from './App.vue';importElementUI from 'element-ui';import'element-ui/lib/theme-default/index.css';Vue.use(ElementUI);const app =newVue({el:'#app',render: h => h(App)});
App.vue：
<template><div id="app"><example></example><el-button>HelloElement</el-button></div></template><script>importExample from './components/Example.vue';exportdefault{name:'app',components:{Example}};</script>
祝大家使用愉快。
相关仓库：
