如何在vue-cli中集成Materialize JS？已安装但JS未加载求助

我之前也碰到过这个问题，Materialize的JS加载失败大多是因为依赖没装全或者引入顺序不对，下面给你几种靠谱的解决办法：

第一步：先补全必要依赖 #

Materialize CSS的JS部分依赖jQuery和Popper.js，很多人只装了materialize-css却漏掉了这两个核心依赖，导致JS无法正常初始化。先执行下面的命令安装它们：

npm install jquery popper.js --save

方法一：全局全量引入（适合全项目使用Materialize） #

在项目的main.js文件中，按照jQuery → Popper → Materialize CSS → Materialize JS的顺序引入，顺序绝对不能乱：

// main.js
import 'jquery'
import 'popper.js'
// 引入Materialize样式
import 'materialize-css/dist/css/materialize.min.css'
// 引入Materialize核心JS
import 'materialize-css/dist/js/materialize.min.js'

这样配置后，整个项目的组件都能直接使用Materialize的JS组件（比如下拉菜单、模态框等），不需要再单独引入。

方法二：通过Webpack自动注入依赖（更优雅的全局引入） #

如果不想在main.js里写一堆引入语句，可以通过Vue CLI的Webpack配置自动注入jQuery和Popper：

1. 在项目根目录创建（如果没有的话）vue.config.js文件，添加以下配置：

// vue.config.js
const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default']
      })
    ]
  }
}

2. 然后在main.js里只需要引入Materialize的样式和JS即可：

// main.js
import 'materialize-css/dist/css/materialize.min.css'
import 'materialize-css/dist/js/materialize.min.js'

方法三：按需引入（适合仅部分组件使用Materialize） #

如果你的项目只有少数组件用到Materialize，没必要全局引入，只需要在目标组件内单独引入并初始化：

// 目标组件的<script>部分
import 'materialize-css/dist/css/materialize.min.css'
import M from 'materialize-css/dist/js/materialize.min.js'

export default {
  mounted() {
    // 组件挂载后，初始化需要的Materialize组件
    // 示例：初始化下拉菜单，需要给元素加ref="dropdown"
    M.Dropdown.init(this.$refs.dropdown)
    // 其他组件比如模态框：M.Modal.init(this.$refs.modal)
  }
}

常见排查点 #

• 检查版本兼容性：Materialize 1.0.0及以上版本需要jQuery 3.x或更高版本，不要装错版本。
• 重启开发服务器：修改vue.config.js或main.js后，记得重启npm run serve，否则配置不会生效。

内容的提问来源于stack exchange，提问作者Jones Stephen