Laravel 集成 Vue - 简书 - 程序猿·D·安宇雨 DeepMind

Laravel 集成 Vue - 简书

安宇雨 - 随手采集
2019-11-04 08:42:02
随手采集
0000-未整理-等待研究

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

虽然不喜欢这样子搞,但是还是记录一下做法:
在管理后台使用vue

1.在laravel项目中定义好路由,本例为 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模板内写入如下代码:

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

运行命令
$ cnpm install
$ cnpm install vue-router --save-dev
在resources/js/app.js写入如下代码:

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,并且没有贴出CSS代码,代码可见elementUI官网
App.vue文件请根据各自需要进行修改
在resources/js/views下面新建 Home.vue并写上你的代码即可!