laravel+vue2.0终于搞定了!

laravel是一个php框架,vue是一个前端MVVM轻量级开源框架.
为啥要组合它俩一起开发呢,除了好玩就是有挑战了?并不是的:
1、起手在慕课网看了laravel基础入门的就会发现,laravel解决了很多后台开发起来老大难的问题,模板引擎和路由机制还有很多开发服务:登录/注册验证,验证码,分页等等..
2、起手也在慕课网看了vue基础也有很多先进的概念如:数据绑定+组件化+热加载+压缩打包等等

概念都是死的,我来带你享受一下这俩货开发的乐趣

1:首先在你的laravel工程的package.json文件写上vue的依赖:

"devDependencies": {
	"gulp": "^3.9.1",
	"webpack": '2.1.0'
	"laravel-elixir": "^6.0.0-9",
	"laravel-elixir-vue": "^0.1.4", //新鲜东西:帮助在lavarel构建vue插件
	"vue": "^2.1.0", //vue.js
	"vue-resource": "^1.0.1", //vue版ajax请求用的插件
	"vue-router": "^2.1.1", //vue核心路由插件
	"stylus": "^0.54.5", //一种很爽的css的书写方式
	"stylus-loader": "^2.4.0" //自然就是翻译stylus成真正css的东西
}

2:打开命令行一句话把上面的这些依赖都下载了:
npm install
(如果提示你没有npm我也帮不了你了,先去下载node和npm吧)

3:打开这个gulpfile配置一波(es6语法):mix的意思就是打包并压缩之后你写的vue生成的js文件,输出到的目标就是 public/js/main.js

const elixir = require('laravel-elixir');

require('laravel-elixir-vue');

elixir(mix => {
	mix.webpack('main.js');
});

4:正式开始三部曲:
一、在routers.php写上一个打开blade模板的路由

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

二、写上test模板(用sublimes的快捷键html:xt加tab就可以生成模板哦)

重点就在先写vue的一个挂载点app.vue,然后引入之前说的打包好的js文件
三:在resource/assets/js新建一个vue的main.js(具体请看官网介绍的vue)

import Vue from 'vue/dist/vue.js';  
import VueRouter from 'vue-router';  
import VueResource from 'vue-resource';  
import App from './App.vue';  
import mainPage from './components/mainpage/mainpage.vue';  
Vue.use(VueRouter);  
Vue.use(VueResource);  
  
const routes = [  
  { path: '/main', component: mainPage },  
];  
const router = new VueRouter({
	routes,
	linkActiveClass: 'active'  
});  
new Vue(Vue.util.extend({ router }, App)).$mount('#app')  
router.push('/main');

也在js下新建一个vue文件(有头组件有路由):

最后在js下新建文件夹components来放自己的组件(header.vue就在这里面)

5:怎么运行呢?打开命令行窗口:输入gulp等它编译,打包,然后:
a:命令行php artisan serve 或者
b:把工程放在wamp/www下开启wamp然后在地址栏输入工程路径+’/test’回车