假设你已经搭建好 Laravel 环境
Vue.js
2016年，前端框架层出不穷，做一个项目之前，我们的技术栈有了更多的选择。
Vue就是一个前端框架，类似Angular,React,Ember。
Vue.js 是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。—— 官方描述
如果到现在为止，你都没接触过Vue的话，那么建议你花点时间入坑。
在项目中使用Vue
官方出了个工具，vue-cli，他可以帮你快速地构建一个Vue的开发环境：单vue文件，热加载，代码检查，单元测试等等。
为了让项目模块化，官方推荐搭配是 webpack + vue-loarder 或者 Browserify + vueify。选择哪种构建工具取决于你的经验和需求。Webpack 的功能更强大，如代码分割，将静态资源当作模块，提取组件的 CSS 到单独的一个文件等，不过它的配置相对复杂一点。如果你不需要 Webpack 的那些功能，使用 Browserify 更简单。
这篇文章我们主要讲如何在Laravel 中快速使用vue 进行开发，所以使用的是 Browserify + vueify。
npm install
安装完 laravel， 先在你的项目根目录执行 npm install，这条命令会根据package.json中的配置安装所需依赖。
{
|
laravel 中自带了一个库叫 laravel-elixir，它提供了非常简洁的API，让你能快速处理 gulp 任务。
而laravel-elixir 中又依赖了很多库，比如 Sass, Less, Babel, CoffeeScript，等等，但是所有这些，你只需要在根目录 npm i一下即可（依赖太多，通常都会很久）。
接着安装vueify相关依赖
npm i vue vueify babel-plugin-transform-runtime --save-dev
|
Vue单文件入口
为了让 laravel-elixir 自带的browserify 能够解析vue，在 package.json 中修改browserify配置
{
|
接着在resources/assets/js下面增加以下两个文件夹，entries存放，入口文件js，views文件夹存放vue项目入口。
.
├── entries
│ └── hello.js
└── views
└── Hello.vue
|
入口文件的作用只是起到提供一个创建vue实例的作用。
import Vue from 'vue';
|
views 下就是单个Vue文件了
<template>
<h1>Hello Vue</h1>
</template>
<style>
</style>
<script>
export default {
el() {
return '#app'
}
}
</script>
|
最后，修改Laravel blade 文件，引入js
<html>
|
执行 gulp watch 命令(laravel-elixir 自带的)，打开页面就能看到效果啦(撒花~)
转载：http://w3ctrain.com/2016/06/08/vue-in-laravel/?utm_source=tuicool&utm_medium=referral