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

Question

我的公司购买了 Midone - Vuejs 3 管理仪表板模板 + HTML 版本 + XD 设计文件 （https://themeforest.net/item/midone-vuejs-admin-dashboard-template/28123408） 我尝试使用 HTML 版本，因为我想在 Laravel 8 应用程序/inertia-vue3 应用程序中使用此模板。

在 Midone Vue/HTML Version 子目录下我看到子目录： 冰墙 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

解决了这个问题

Answer 2

兄弟你好，我需要这个 midone vue 项目文件。我是初学者，我想要这个项目初始的模板..如果可能的话，有文档..我可以在哪里免费下载？