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

DianWang 的个人博客 / 3 / 4 / 创建于 6年前 / 更新于 6年前

本篇是提交给作者的issue,搬过来给大家提供一个思路。

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，写好组件，直接在控制器里调用就可以了：

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

laravel-admin

本作品采用《CC 协议》，转载必须注明作者和本文链接

附言 1 · 6年前

已获作者采纳

本帖由系统于 6年前自动加精

DianWang

课程读者 333 声望

磁盘清理大师 @ 广州造轮子科技

把诗意的理性献给你

16 人点赞

从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等

从小程序个人账户申请开始，带你一步步进行开发一个微信小程序，直到提交微信控制台上线发布。

讨论数量: 4

JINJIALEI

课程读者 1 声望

页面跳转组件不会自动加载，刷新就会加载这个怎么解决啊？

6年前评论

DianWang

课程读者 333 声望 / 磁盘清理大师 @ 广州造轮子科技

@JINJIALEI 由于laravel-admin的局部刷新机制，会导致跳转之后，vue无法初始化，你把assets/js/app.js下初始化的代码，

const app = new Vue({
        el: '#app'
    });

放到控制器里，每次加载都自动初始就可以了，例子如下：

 public function index(Content $content)
    {
        Admin::script(<<<EOF
        const app = new Vue({
            el: '#app'
        });
EOF
        );
        return $content
            ->header('Header')
            ->description('description')
            ->row(function(Row $row) {
                $row->column(8, $this->grid());
                $row->column(4, '<example></example>');
            });
    }

6年前评论

wj760

0 声望

@DianWang 请问表单里面如何使用vue

5年前评论

Komahui

课程读者 4 声望

你这步骤中的1和2是怎么个移除法？

5年前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

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

Description:

Steps To Reproduce:

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

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

Description:

Steps To Reproduce:

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录