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

Question

我公司买了 Midone - Vuejs 3 Admin Dashboard Template + HTML Version + XD Design File (https://themeforest.net/item/midone-vuejs-admin-dashboard-template/28123408) 我尝试使用 HTML 版本，因为我想在 Laravel 8 应用程序/惯性 vue3 应用程序中使用此模板。

在 Midone Vue/HTML 版本子目录下，我看到子目录： 冰墙 v1.0.9 拉比克 v3.1.0 修补匠 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：

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

从点开始：

请按照以下步骤操作。

我用这个示例的代码替换了 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

解决了这个问题