Skip to content

让Laravel-admin可以直接使用Vue组件的方案探索 #2692

@DianWoung

Description

@DianWoung
  • Laravel Version: 5.7.*
  • PHP Version: 7.2
  • Laravel-admin: 1.5.7

Description:

Laravel-admin与Vue自由结合的初步方案

Steps To Reproduce:

1,移除package.json中bootstrap及jquery组件(本身重复了,排除冲突)
2,移除resource/js/bootstrap.js中bootstrap及jquery相关代码
3,修改vendor/encore/laravel-admin/resources/views/index.blade.php中content外包裹一层div,如下:

    <div id="app">
        @yield('content')
    </div>

4, npm install安装组件
5,在app/Admin/bootstrap.php文件里引入app.js及app.css文件

   Encore\Admin\Admin::js('/js/app.js');
   Encore\Admin\Admin::css('/css/app.css');

6,写好组件,直接在控制器里调用就可以了:

        Admin::script(<<<EOF
        const app = new Vue({
            el: '#app'
        });
EOF
        );
  return $content
            ->header('Title')
            ->description('description')
            ->row(function(Row $row) {
                $row->column(4, '<example-component></example-component>');
            });

总结:这个Issue是希望作者能直接在index.blade.php中加入<div id="app"></div>标签,即不影响本身组件的使用,又可以支持Vue的组件接入,提高项目的灵活性和可扩展性。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions