如何通过NPM将Mmenu添加到Laravel 8项目中

1. 确认依赖安装 #

你已经通过NPM完成安装，若后续出现模块缺失问题可重新执行安装命令：
npm install mmenu-js --save

2. 配置JS全局挂载 #

你在bootstrap.js中写的挂载代码是正确的，确认文件内存在以下两行即可：

import Mmenu from 'mmenu-js';
window.Mmenu = Mmenu;

3. 引入样式文件 #

mmenu.js 配套样式需要单独引入，打开项目resources/sass/app.scss文件，添加以下导入代码：

// 写法一：通用路径写法
@import '../node_modules/mmenu-js/dist/mmenu.css';

// 写法二：如果你的Laravel Mix支持~别名定位node_modules，也可以用这个写法
// @import '~mmenu-js/dist/mmenu.css';

4. 编译前端资源 #

执行编译命令将配置的JS和CSS打包到项目公共目录：
npm run dev
如果是开发阶段可以用npm run watch实时监听文件变动自动编译。

5. 页面资源加载 #

确认你的公共布局模板（一般是resources/views/layouts/app.blade.php）中已经加载了编译后的静态资源：

<head>
  <!-- 其他head内容 -->
  <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
  <!-- 页面内容 -->
  <script src="{{ asset('js/app.js') }}"></script>
</body>

6. 初始化菜单 #

在需要加载菜单的页面编写对应的HTML结构和初始化代码，示例如下：

HTML结构示例 #

<!-- 菜单触发按钮 -->
<a href="#my-menu">打开菜单</a>

<!-- 菜单结构 -->
<nav id="my-menu">
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于我们</a></li>
    <li><a href="/contact">联系我们</a></li>
  </ul>
</nav>

初始化代码示例 #

注意初始化代码必须放在app.js加载之后的位置执行：

document.addEventListener('DOMContentLoaded', function() {
  new Mmenu('#my-menu', {
    // 这里填写你需要的mmenu配置项
    extensions: ['position-left', 'theme-dark'],
    // 其他配置按需添加
  });
});

常见问题排查 #

• 若控制台报Mmenu is not defined：首先确认编译命令已经执行且无报错，再检查初始化代码的位置是否在app.js加载之后
• 若菜单样式异常：检查app.scss中是否正确引入了mmenu的css文件，编译后查看app.css中是否存在mmenu相关样式代码
• 若修改配置后不生效：可执行npm run clear清除mix缓存后重新编译资源

内容的提问来源于stack exchange，提问作者Kenny King