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

Question

我公司购买了Midone - Vuejs 3 Admin Dashboard模板+HTML版本+XD设计文件 ( https://themeforest.net/item/midone-vuejs-admin-dashboard-template/28123408 ) 我尝试使用 HTML 版本，因为我想在 Laravel 8 app / inertia-vue3 app.

中使用此模板

在 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

起点：

Please follow the steps below.

我用这个示例的代码替换了 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 中定义任何路径变量。在上面的文章中，不清楚什么是路径变量... 有什么想法吗？

提前致谢！

Answer 1

添加行：

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

解决了这个问题

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

How to install Midone - Vuejs 3 Admin Dashboard Template under Laravel/Inertiajs app?

inertiajs

laravel

vue.js