如何在 Laravel/Inertiajs 应用程序下安装 Midone - Vuejs 3 管理仪表板模板？

Question

My company bought Midone - Vuejs 3 Admin Dashboard Template + HTML Version + XD Design File ( https://themeforest.net/item/midone-vuejs-admin-dashboard-template/28123408 ) I try to use HTML Version, as I want在 Laravel 8 应用程序/惯性 vue3 应用程序中使用此模板。

在 Midone Vue/HTML 版本子目录下，我看到子目录： Icewall v1.0.9 Rubick v3.1.0 Tinker v1.0.6

我先尝试，然后在“构建工具”部分阅读文档 Midone Vue/HTML Version/Icewall v1.0.9/Documentation/index.html：

Build Tools
Learn how to configure Laravel Mix
Laravel Mix is ​​a wrapper for webpack. With Laravel Mix, we can shorten our build tools configuration and focus on the code we want to develop. You can configure Laravel Mix on the webpack.mix.js file.

                            

...
mix.js("src/js/app.js", "public/dist/js")
    .sass("src/sass/app.scss", "public/dist/css")
...
                            

我有文件 resources/js/app.js 的内容：

require('./bootstrap');

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

我找到了文件 Midone Vue/HTML Version/Icewall v1.0.9/Source/src/js/app.js 的内容：

/*
 |--------------------------------------------------------------------------
 | 3rd Party Libraries
 |--------------------------------------------------------------------------
 |
 | Import 3rd party library JS files.
 |
 */
import "./bootstrap";
import "./tw-starter";
import "./chart";
import "./highlight";
import "./feather";
import "./tiny-slider";
import "./tippy";
import "./datepicker";
import "./tom-select";
import "./dropzone";
import "./validation";
import "./zoom";
import "./notification";
import "./tabulator";
import "./calendar";

/*
 |--------------------------------------------------------------------------
 | Components
 |--------------------------------------------------------------------------
 |
 | Import JS components.
 |
 */
import "./maps";
import "./chat";
import "./show-modal";
import "./show-slide-over";
import "./show-dropdown";
import "./search";
import "./copy-code";
import "./show-code";
import "./side-menu";
import "./mobile-menu";
import "./side-menu-tooltip";
import "./dark-mode-switcher";
    

我想我需要复制“Midone Vue/HTML Version/Icewall v1.0.9/Source/src”子目录的内容，但不确定在哪个子目录下？

我应该以哪种方式修改我的 resources/js/app.js 和 webpack.mix.js 文件？

更新块 1：

我在https://themeforest.net/item/midone-vuejs-admin-dashboard-template/28123408/comments?page=14的 Laravel 8 应用程序下找到了如何使用 Midone 的说明

从点开始：

请按照以下步骤操作。

我用这个示例的代码替换了 webpack.mix.js：

const mix = require("laravel-mix");
const tailwindcss = require("tailwindcss");

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.alias({
    "@": path.join(__dirname, "resources/app"),
    "~": path.join(__dirname, "node_modules"),
});

mix
    .js("resources/app/main.js", "public/dist/js")
    .vue()
    .sass("resources/app/assets/sass/app.scss", "public/dist/css")
    .options({
        processCssUrls: false,
        postCss: [tailwindcss("./tailwind.config.js")],
    })
    .autoload({
        "cash-dom": ["cash"],
        "@popperjs/core": ["Popper"],
    })
    .browserSync({
        proxy: "midone-vue-laravel.test",
        files: ["resources/**/*.*"],
    });
 

但我在控制台 buildeng npm 出现错误：

$ npm run dev

> @ dev /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited
> npm run development


> @ development /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited
> mix

[webpack-cli] ReferenceError: path is not defined
    at Object.<anonymous> (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/webpack.mix.js:16:10)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at module.exports (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/laravel-mix/setup/webpack.config.js:11:5)
    at loadConfigByPath (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/webpack-cli/lib/webpack-cli.js:1745:27)
    at async Promise.all (index 0)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `mix`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/master/.npm/_logs/2022-01-06T05_07_47_079Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/master/.npm/_logs/2022-01-06T05_07_47_123Z-debug.log

实际上我没有在 webpack.mix.js 中定义任何路径变量。 在上面的文章中，不清楚什么是路径 var... 有什么想法吗？

提前致谢！

Answer 1

添加行：

const path = require('path'); //add this

修复了这个问题