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

[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的组件接入，提高项目的灵活性和可扩展性。

[z-song]

很棒的想法！，已经加上了id

[DianWoung]

@z-song 加id的位置有点问题，加在最外层会在vue-devtool报大量错误(虽然页面是可以正常显示的)，加在如图所示位置，一切正常。

[z-song]

已经加上了 谢谢！

[pcfjojo]

@z-song how can use vue component in admin?

[faydanube]

@Dianwoung @z-song vue 的组件必须刷新一次才能加载，应该是 pjax 的问题，有什么建议的解决方案嘛？除了禁用 pajx……

[DianWoung]

@Dianwoung @z-song vue 的组件必须刷新一次才能加载，应该是 pjax 的问题，有什么建议的解决方案嘛？除了禁用 pajx……

我在laravel-china的帖子的评论区有回复，只是用于一些简单的插件式用途挺方便的。

[komahui]

jq代码怎么个移除法？

[DianWoung]

jq代码怎么个移除法？

就是把那行代码注释或者删除

[komahui]

感觉还是不太懂具体的操作，要是有个具体的讲解就好了

[chaishi]

不建议使用这种方案，原因有二， 其一， 如果使用这种方案兼容了 vue.js，改变了 laravel-admin 的一堆内容； 那其它框架呢？react 呢？来一个前端框架/库 就要兼容一次么，这样扩展性就太差了。

其二， laravel-admin 主要还是后端同学开发，当前的方案还是把前端代码扩展限制在了 laravel-admin 内部书写，在当今这个前后端几乎分离开发的时代，不少后端同学是不清楚咋写前端代码的，业务定制性越高，在 laravel-admin 里面扩展前端代码难度越高。

建议方案， laravel-admin 作为基础框架存在，和前端的接轨，使用 配置 + 前端扩展 的方式。 「配置」laravel-admin 负责输出各类前端框架所需 配置信息，比如和 vue.js 对接，配置信息里面就需要包含各类组件所需的参数，拿表格来说，配置信息就是表格每一列的参数配置，[{colKey, title, value, color, style, editable,...} ] 「前端扩展」针对 laravel-admin 出一款 laravel-admin-vue 插件，这个插件可以就根据前面 laravel-admin 的「配置」信息，进行基于 vue.js 相关的前端渲染。相较于在 laravel 里面写前端代码；以这种扩展的方式来写，会更轻松方便，扩展性也好。

一句话：统一的配置，不同的实现，不受语言框架限制。如此，形成一个 基于 laravel-admin 更加完善的开源生态

@z-song