https://laravelacademy.org/post/9674.html

雖然不喜歡這樣子搞,但是還是記錄一下做法:
在管理后臺(tái)使用vue

1.在laravel項(xiàng)目中定義好路由,本例為 http://lv.test/admin
web.php路由定義

Route::get('admin','Admin\AdminController@index')->name('admin');

新建控制器及方法并加載模板

public function index()
    {
        return view('admin.home');
    }

resources/views/admin/home.blade.php模板內(nèi)寫(xiě)入如下代碼:

<script src="{{asset('js/app.js')}}" defer></script>
<div id="app"></div>

運(yùn)行命令
$ cnpm install
$ cnpm install vue-router --save-dev
在resources/js/app.js寫(xiě)入如下代碼:

require('./bootstrap');
import App from './components/App'
import router from './router'
window.Vue = require('vue');
const app = new Vue({
    el: '#app',
    router,
    components:{App},
    template:'<App/>'
});

在resources/js下面新建route/index.js
index.js代碼如下:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../view/Home.vue'
Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home,
    },
  
];

const router = new VueRouter({
    routes
});
export default router;

在components下新建App.vue代碼如下:

<template>
    <el-container>
        <el-header>
            <Header></Header>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <Aside></Aside>
            </el-aside>
            <router-view/>
        </el-container>
    </el-container>
</template>

<script>
    import Header from '../components/Header.vue'
    import Aside from '../components/Aside.vue'

    export default {
        name: "App",
        components: {
            Header,
            Aside,
        }
    }
</script>

此處使用了了elementUI,并且沒(méi)有貼出CSS代碼,代碼可見(jiàn)elementUI官網(wǎng)
App.vue文件請(qǐng)根據(jù)各自需要進(jìn)行修改
在resources/js/views下面新建 Home.vue并寫(xiě)上你的代碼即可!

Over