如何使用laravel-mix将mdbootstrap vue加载到Laravel 5中? [英] How to load mdbootstrap vue into Laravel 5 with laravel-mix?

问题描述

我正在尝试将mdbootstrap vue安装到Laravel 5.6项目中，但是我真的不明白我应该怎么做.

I am trying to install mdbootstrap vue into a Laravel 5.6 project, but i realy don't understand how i suppose to do it.

如果有人可以给我一些教程，那对您很好；-)

If somebody can give me a little tutorial, it would be nice of you ;-)

推荐答案

尝试一下(更新)...

Try this(updated)...

(假设您已经安装了laravel)

(Assuming you have already installed laravel)

转到您的项目目录并执行:

Go to your project directory and do:

npm install --save mdbvue

您还需要:

npm install --save-dev babel-preset-stage-2

下一步转到resources/js/bootstrap.js，并在require('bootstrap');下添加require('mdbvue');，它应如下所示:

next go to resources/js/bootstrap.js and under the require('bootstrap'); add require('mdbvue'); it should look something like this:

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
    require('mdbvue'); //<---this is what you need to add
} catch (e) {}

下一步转到resources/sass/app.scss并在bootstrap导入下添加MDB css，您可能还需要导入字体真棒的css:

Next go to resources/sass/app.scss and add the MDB css under the bootstrap import, you might also need to import the font-awesome css:

// Material Design Bootstrap
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import '~bootstrap/scss/bootstrap';
@import "~mdbvue/build/css/mdb.css";

现在要编译app.css和app.js文件，只需执行npm run dev

Now to compile your app.css and app.js files just do npm run dev

所有操作都应已启动并运行，您可以自由使用MDBvue组件，也可以只使用MDB jQuery版本.

With this everything should be up and running and you are free to use MDBvue components or simply use MDB jQuery version.

这对我来说适合Laravel 5.7项目.希望这会有所帮助.

This worked for me on a Laravel 5.7 project. Hope this helps.

这篇关于如何使用laravel-mix将mdbootstrap vue加载到Laravel 5中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！