laravel+vue2.0终于搞定了!

星期三, 2017-05-24 14:27 — adminshiping1

开文废话:

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

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

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

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

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

1:首先在你的laravel工程(新建工程请看laravel学堂官网)的package.json文件写上vue的依赖:

[plain]view plain copy 
"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

[plain]view plain copy 
const elixir = require('laravel-elixir');  
  
require('laravel-elixir-vue');  
  
elixir(mix => {  
  mix.webpack('main.js');  
});  

4:正式开始三部曲:

一:在routers.php写上一个打开blade模板的路由

[plain]view plain copy 
Route::get('/test', function () {  
    return view('test');  
});  

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

[plain]view plain copy 
<!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>  
<strong><span style="color:#ff6666;">   <div id='app'></div>  
    <script src="{{ asset('public/js/main.js') }}"></script></span></strong>  
</body>  
</html>  

重点就在先写vue的一个挂载点app,然后引入之前说的打包好的js文件

三:在resource/assets/js新建一个vue的main.js(具体请看官网介绍的vue)

[plain]view plain copy 
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文件(有头组件有路由):

[plain]view plain copy 
<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相比,数据绑定就是棒!

来自 http://blog.csdn.net/wmwmdtt/article/details/53924895

普通分类:

laravel

You are here

友情链接

搜索表单

用户登录

You are here

laravel+vue2.0终于搞定了!

友情链接