是否可以在没有 jQuery 的情况下使用 Materializecss？答案

【问题标题】：Is it possible to use Materializecss without jQuery?是否可以在没有 jQuery 的情况下使用 Materializecss？
【发布时间】：2017-02-20 19:56:54
【问题描述】：

我想在没有 jQuery 的情况下使用 materializecss。例如，我想在不使用 jQuery 的情况下执行以下操作：

$('.chips-initial').material_chip({
    data: [{
      tag: 'Apple',
    }, {
      tag: 'Microsoft',
    }, {
      tag: 'Google',
    }],
  });

谢谢

【问题讨论】：

materializecss.com/getting-started.html 最后要注意的是，在导入 materialize.js 之前必须先导入 jQuery！
@tuna 真可惜，因为现在 jQuery 的使用似乎正在放缓。每个依赖它的框架都提出了这个问题。

标签： javascript jquery materialize

【解决方案1】：

因为version 1.0.0你可以。

const elem = document.querySelector('.chips');
const instance = M.Chips.init(elem, options);

List of possible options 用于筹码。

对于 Angular2+，您需要：

npm install materialize-css

在 package.json

中

"dependencies": {
    "materialize-css": "^1.0.0-alpha.4",
}

或更高版本。

在 .angular-cli.json

  "styles": [
    "../node_modules/materialize-css/dist/css/materialize.css"
  ],
  "scripts": [
    "../node_modules/materialize-css/dist/js/materialize.js"
  ],

为了能够在您的组件中使用 M 对象，只需添加到导入中

declare const M: any;

【讨论】：

【解决方案2】：

从 Materialize 1.0.0 开始，jQuery 不再是依赖项。

见https://medium.com/@materializecss/materialize-to-1-0-and-beyond-e0233b8ac15

以前的版本仍然依赖于 jQuery。或者，您可以使用 Ken Wheeler 的 Cash。

【讨论】：

jQuery 这些天似乎有点过时了
我们计划迁移到 ES6 组件并停止使用 jQuery。
我认为 Web 组件支持仍然很薄弱。也许使用 polyfill 没关系
我不是指 webcomponents，只是针对浏览器的纯 ES6 babelized。
Materialize 1 不使用 jQuery

【解决方案3】：

是的，这是可能的。将此添加到每个 HTML 文档的头部。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

然后你可以给标签添加类来添加样式。有很多有用的教程可以在谷歌搜索中找到。我最喜欢的就在这里：

https://www.youtube.com/watch?v=gCZ3y6mQpW0&list=PL4cUxeGkcC9gGrbtvASEZSlFEYBnPkmff&ab_channel=TheNetNinja

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
谢谢。我会解决的。