README

Laravel 包，用于使用 inertia vue 创建 Laravel 管理面板

内容管理系统模板的作者（致谢）

• @fmhorfilla
• @janzcio

先决条件

• Laravel 项目 | 新建或现有
• Node 版本应高于 v20.10.0

安装

使用 composer 需要此包。

    composer require "mark-villudo/laravel-admin-panel-inertia-vue @dev"

发布资源和布局

在 bootstrap/providers.php 中注册服务提供者

    MarkVilludo\AdminPanelInertiaVue\CMSServicedProvider::class,

清除缓存

    php artisan optimize

发布 resources/assets 和 resources/js/Layouts

    php artisan vendor:publish --tag=cms-assets

设置

在 inertia 中设置初始页面（页面、组件等）

    #This command installs Jetstream with server-side rendering support for Inertia.js, enhancing performance and SEO.
    php artisan jetstream:install inertia --ssr

    #This command runs all pending database migrations, creating the necessary tables and columns in the database.
    php artisan migrate

设置布局

步骤 1

打开 resources/js/app.js，导入资源并添加以下依赖：VueSweetalert2、VueTippy 和 Toastr

    import './bootstrap';
    import '@assets/css/bootstrap/bootstrap.min.css';
    import '@assets/css/app.css';
    import '@resources/css/app.css';


    import { createApp, h } from 'vue';
    import { createInertiaApp } from '@inertiajs/vue3';
    import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
    import { ZiggyVue } from '../../vendor/tightenco/ziggy';

    const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

    import VueSweetalert2 from 'vue-sweetalert2';
    import 'sweetalert2/dist/sweetalert2.min.css';

    import { plugin as VueTippy } from 'vue-tippy';
    import 'tippy.js/dist/tippy.css';


    // Toastr initialization
    import toastr from 'toastr';
    import 'toastr/build/toastr.css';

    // Toastr does not have an install method, you might need to configure it differently.
    toastr.options = {
        closeButton: true,
        progressBar: true,
        positionClass: 'toast-top-right',
        showDuration: '300',
        hideDuration: '1000',
        timeOut: '5000',
        extendedTimeOut: '1000',
        showEasing: 'swing',
        hideEasing: 'linear',
        showMethod: 'fadeIn',
        hideMethod: 'fadeOut'
    };

    createInertiaApp({
        title: (title) => `${title} - ${appName}`,
        resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
        setup({ el, App, props, plugin }) {
            const app = createApp({ render: () => h(App, props) });

            app.use(plugin);
            app.use(ZiggyVue);
            app.use(VueSweetalert2); //additional
            app.use(VueTippy); //additional

            // Toastr does not have an install method. It should be configured globally.
            app.config.globalProperties.$toastr = toastr;

            app.mount(el);

            return app;
        },
        progress: {
            color: '#4B5563',
        },
    });

步骤 2

更新 package.json，在 devDependencies 区块中更新 toast，在 dependencies 区块中更新 lodash、vue-sweetalert2 和 vue-tippy

    "devDependencies": {
        "toastr": "^2.1.4",
    },
    "dependencies": {
        "lodash": "^4.17.21",
        "vue-sweetalert2": "^5.0.11",
        "vue-tippy": "^6.4.1"
    }

步骤 3

更新 vite.config.js 并添加/更新以下代码

    import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';

    //additional
    import vue from "@vitejs/plugin-vue";
    import path from "path";

    export default defineConfig({
        plugins: [
            laravel({
                input: ['resources/css/app.css', 'resources/js/app.js'],
                refresh: true,
            }),
            //additionals
            vue(),
        ],
        //additionals
        resolve: {
            alias: {
            
                "@resources": path.resolve(__dirname, "resources"),
                "@assets": path.resolve(__dirname, "resources/assets"),
                "@public": path.resolve(__dirname, "public/assets"),
                "@mixins": path.resolve(__dirname, "resources/js/Pages/Mixins"),
            },
        },
        build: {
            rollupOptions: {
                output: {
                    assetFileNames: 'assets/[name]-[hash].[ext]',
                },
            },
        },
    });

步骤 4

更新 resources/js/Layouts/AppLayout.vue

    <template>
    <!-- Page Wrapper -->
    <div id="wrapper">
        <!-- Sidebar -->
        <SidebarLayout />
        <!-- End of Sidebar -->
        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">
        <!-- Main Content -->
        <div id="content">
            <!-- Topbar -->
            <HeaderLayout :page_title="page_title" :page_icon="page_icon" />
            <!-- End of Topbar -->
            <!-- Begin Page Content -->
            <slot />
            <!-- /.container-fluid -->
        </div>
        <!-- End of Main Content -->
        <!-- Footer -->
        <footer class="sticky-footer bg-white shadow">
            <div class="container my-auto">
            <div class="copyright text-center my-auto">
                <span>Copyright &copy; IMSupport 2024</span>
            </div>
            </div>
        </footer>
        <!-- End of Footer -->
        </div>
        <!-- End of Content Wrapper -->
    </div>
    <!-- End of Page Wrapper -->
    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
        <i class="fas fa-angle-up"></i>
    </a>
    </template>

    <script>

    import HeaderLayout from "./HeaderLayout.vue";
    import SidebarLayout from "./SidebarLayout.vue";

    export default {
        props: {
            page_title: String,
            page_icon: String
        },
        components: {
            HeaderLayout,
            SidebarLayout,
        },
    };
    </script>

步骤 5

在 resources/views/app.blade.php 中添加 css 和 js 依赖

    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    </head>
    <body class="font-sans antialiased">
        @inertia
        <!-- additionals -->
        @vite('resources/assets/js/jquery-3.7.1.min.js')
        @vite('resources/assets/js/bootstrap/bootstrap.bundle.min.js')
        @vite('resources/assets/js/bootstrap/main.js')
    </body>

步骤 6

打开 resources/js/Pages/Dashboard.vue 并更新 AppLayout

    from
    <AppLayout title="Dashboard">

    to
    <AppLayout page_title="Dashboard" page_icon="fas fa-layer-group">

步骤 7

运行命令

    npm install //This command installs all dependencies listed in the package.json file of your project. 
    npm run dev //runs a development server or build process specific to your project setup.
    php artisan optimize //clear cache
    php artisan serve //serve laravel application

步骤 8

测试它。

要启用用户管理模块

步骤 1

发布 Spatie 服务提供者的所有文件

    php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"

然后发布我们包的用户管理所有文件

    php artisan vendor:publish --tag=cms-usermanagement

然后运行此命令以清除路由和其他缓存的缓存

    php artisan optimize:clear

步骤 2

将其包含在 routes/web.php 中

    // Include user management routes/web.php
    include __DIR__.'/usermanagement.php';

步骤 3

更新 Models/User.php，为 spatie 和 guard 添加以下代码

    use Spatie\Permission\Traits\HasRoles;


    use HasRoles;

    public $guard_name = 'sanctum';

步骤 4

然后将其添加到 database/DatabaseSeeder

    $this->call(PermissionSeeder::class);
    $this->call(RoleSeeder::class);
    $this->call(UserSeeder::class);

步骤 5

运行迁移刷新和种子初始用户、角色和权限数据

    php artisan optimize:clear
    php artisan migrate:fresh
    php artisan db:seed

步骤 6

更新 app\Http\Middleware\HandleInertiaRequests.php

    public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
            'user.permissions' => function () use ($request) {
                return ( $request->user() ? $request->user()->getAllPermissions()->pluck('name') : null );
            },
            'user.roles' => function () use ($request) {
                return ( $request->user() ? $request->user()->roles()->pluck('name') : null );
            },
            'user.locale' => function () use ($request) {
                return session('locale');
            },
        ]);
    }

步骤 7

更新 Resources/js/Pages/SidebarLayouts.vue 以包含用户、角色和权限模块

    <li class="nav-item" :class="{ 'active': ['user-management.index'].includes($page.component) }" 
        v-if="$page.props.user.permissions.includes('user_management')">
            <Link class="nav-link" :href="'/user-management'">
            <i class="fas fa-layer-group"></i>
            <span>User Management</span></Link>
    </li>
    <li class="nav-item" :class="{ 'active': ['roles.index'].includes($page.component) }" 
        v-if="$page.props.user.permissions.includes('roles')">
            <Link class="nav-link" :href="'/admin/dashboard'">
            <i class="fas fa-layer-group"></i>
            <span>Roles</span></Link>
    </li>
    <li class="nav-item" :class="{ 'active': ['permissions.index'].includes($page.component) }" 
        v-if="$page.props.user.permissions.includes('permissions')">
            <Link class="nav-link" :href="'/admin/dashboard'">
            <i class="fas fa-layer-group"></i>
            <span>Permissions</span></Link>
    </li>

步骤 8

测试它。

许可证

MIT 许可证（MIT）。有关更多信息，请参阅许可证文件。