0

我正在学习如何使用 Laravel，并且对使用 MDBootstrap 设置网页样式很感兴趣。但是，我对如何正确地将它集成到我的项目中感到困惑。我不想使用 CDN 链接它，而是想将它安装到我的项目中。

有人可以告诉我在基本的 Laravel 项目中实现这一目标的必要步骤吗？

4

2 回答 2

2

Laravel 自带 2 个前端包管理器：npm 和 yarn

npm

npm i mdbootstrap

纱

yarn add mdbootstrap

在此之后，您的包位于node_modules目录中。

您可以导入 sass文件并将 js 从包合并到vendor.js。

您可以使用webpack.mix.js配置转换到的位置

运行npm run dev将开始转译。

如果你想安装 mdbootstrap pro，你应该按照这些步骤

  1. 获取许可证并发送邮件联系@mdbootstrap.com 请求访问他们的 git 存储库（因为他们没有自动执行此操作）
  2. 在 gitlab 上生成访问令牌

  3. 跑

    npm install git+https://oauth2:[TOKEN]@git.mdbootstrap.com/mdb/[REPO].git --save

    其中[TOKEN]是您在步骤 2 中的令牌，而[REPO]是您从 jquery、angular、vue 或 react 选项中需要的令牌。您可以通过访问git.mdbootstrap.com并选择正确的项目来找到确切的 url 。在右上角找到克隆按钮并复制https链接。

于 2019-01-17T12:03:51.510 回答
0

如果你不想使用 CLI /NPM，有一种简单的方法可以将 MDBootstrap 导入 Laravel。

只需将 mdb.min.js 和 mdb.min.js.map 复制到您的 public/js 文件夹。接下来将 mdb css 文件（应该有大约 8 个）复制到您的 public/css 文件夹。

现在在 HTML 刀片文件中（我为此使用了一个头刀片包含文件）添加以下内容：

 <!-- import MDB Pro -->
 <link rel="stylesheet" href="/css/mdb.min.css" />

...然后就在您的结束 BODY 标记之前（我使用“脚”刀片包括），添加以下内容：

 <!-- import Font Awesome -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">

 <!-- import Material Icons from Google Fonts -->
 <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

 <!-- import the MDB javascript file https://mdbootstrap.com/ -->    
 <script type="text/javascript" src="{{ asset('js/mdb.min.js') }}"></script>

...只要记住在新版本出现时更新文件。因为没有 NPM，它不会自动发生。

于 2021-03-29T09:19:27.510 回答