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

DianWang發表於2018-10-25
LaravelVue元件

本篇是提交給作者的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的元件接入，提高專案的靈活性和可擴充套件性。

相關文章