laravel vue使用
郎永福
首先安装vue和vue-router
npm install vue
npm install vue-router
laravel默认已经有了axios，所以可以不用安装
第一步，建立3个文件
第一个文件App.vue 放在js/components目录下
<template>
<div class="">
<div class="">vue demo</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>第二个文件Login.vue，放在js/components/auth目录下
<template>
<div class="">
<div class="">vye login</div>
<router-link to="/authuserinfo">info</router-link>
</div>
</template>
<script>
export default {
name: 'Login',
data () {
return {
phone: ''
}
},
mounted () {
this.getResult()
},
methods: {
getResult () {
var phone = this.$route.params.phone
this.$axios.post('/api/login').then(response => {
console.log(response)
}).catch(error => {
console.log(error)
})
}
}
}
</script>第三个文件Info.vue，放在js/components/auth目录下
<template>
<div class="">
<div class="">vue info</div>
</div>
</template>
<script>
export default {
name: 'AuthUserInfo',
data () {
return {
phone: ''
}
},
mounted () {
this.getResult()
},
methods: {
getResult () {
var phone = this.$route.params.phone
this.$axios.post('/api/authuserinfo').then(response => {
console.log(response)
}).catch(error => {
console.log(error)
})
}
}
}
</script>
第二步， 在js目录下建立routes.js
import VueRouter from 'vue-router'
window.Vue = require('vue')
Vue.use(VueRouter)
import Login from './components/auth/Login'
import AuthUserInfo from './components/auth/Info'
export default new VueRouter({
mode: 'history',
routes: [
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/authuserinfo',
name: 'authuserinfo',
component: AuthUserInfo,
},
],
})
第三步，修改app.js
require('./bootstrap');
import axios from 'axios'
import router from './routes.js'
import App from './components/App'
window.Vue = require('vue')
Vue.prototype.$axios = axios
const app = new Vue({
el: '#app',
router,
render: h => h(App)
})
第四步，在views目录下新建index.blade.php
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>laravel-vue-iview项目</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="/css/app.css" media="all">
</head>
<body>
<div id="app">
</div>
<script src="/js/app.js" charset="utf-8"></script>
</body>
</html>
第五步。在controllers目录下新建IndexController.php
class IndexController extends FrontendController
{
public function index()
{
return view("index");
}
}
第七步，在修改routes/web.php
Route::get('/{any}', 'IndexController@index')->where('any', '.*');这里是关键，不然访问vue的路由会报404
第八步，在controllers目录下建立Api目录，并建立AuthController.php
class AuthController extends ApiController
{
public function login()
{
$data = [
'data' => 'login'
];
return $data;
}
public function info()
{
$data = [
'data' => 'info'
];
return $data;
}
}
第九步，修改routes/api.php
Route::namespace('Api')->group(function () {
// Controllers Within The "App\Http\Controllers\Api" Namespace
Route::post('/login', 'AuthController@login');
Route::post('/authuserinfo', 'AuthController@info');
});
访问/login，如果没问题，就能看到vue demo页面了
类似资料：