laravel+vue2.0终于搞定了!

开文废话:

laravel是一个php框架,vue是一个前端MVVM轻量级开源框架.

为啥要组合它俩一起开发呢,除了好玩就是有挑战了?并不是的:

1:起手在慕课网看了laravel基础入门的就会发现,laravel解决了很多后台开发起来老大难的问题,模板引擎和路由机制还有很多开发服务:登录/注册验证,验证码,分页等等..

2:起手也在慕课网看了vue基础也有很多先进的概念如:数据绑定+组件化+热加载+压缩打包等等

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

1:首先在你的laravel工程(新建工程请看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就可以生成模板哦)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>xxxxx</title>
	<link rel="stylesheet" href="{{asset('public/css/styles.css' )}}" />
</head>
<body>
	<script src="{{ asset('public/js/jquery-3.1.0.min.js') }}"></script>
	<script src="{{ asset('public/js/bootstrap.min.js') }}"></script>
	<div id='app'></div>                                                       //重点
	<script src="{{ asset('public/js/main.js') }}"></script> // 重点
</body>
</html>

重点就在先写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文件(有头组件有路由):

<template>
  <div id="app">
  	<v-header></v-header>
    <router-view></router-view>
  </div>
</template>

<script>
	import header from './components/header/header.vue';
	export default {
	  components: {
	  	'v-header': header
	  }
		
	}
</script>

<style >
</style>

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

5:怎么运行呢?打开命令行窗口:输入gulp等它编译,打包,然后:

a:命令行php artisan serve 或者

b:把工程放在wamp/www下开启wamp然后在地址栏输入工程路径+'/test'回车

有任何疑问欢迎私信.

最后说一句,我太喜欢vue了!跟jquery相比,数据绑定就是棒!

laravel+vue2.0终于搞定了!

猜你喜欢