如何在nodejs中使用MaterializeCSS?

我已经运行了以下命令:

npm install materialize-css --save npm install hammerjs --save npm install jquery --save 

然后在我的app.jsvar materialize = require('materialize-css');

但是当我运行npm start时,我会一直得到相同的错误:

 /Users/myname/code/websites/n-website/node_modules/materialize-css/bin/materialize.js:1 eof require?$=require("jquery"):$}jQuery.easing.jswing=jQuery.easing.swing,jQu ^ TypeError: Cannot read property 'swing' of undefined at Object.<anonymous> (/Users/nyname/code/websites/n-website/node_modules/materialize-css/bin/materialize.js:1:195) at Module._compile (module.js:460:26) at Object.Module._extensions..js (module.js:478:10) at Module.load (module.js:355:32) at Function.Module._load (module.js:310:12) at Module.require (module.js:365:17) at require (module.js:384:17) at Object.<anonymous> (/Users/myname/code/websites/n-website/app.js:9:19) at Module._compile (module.js:460:26) at Object.Module._extensions..js (module.js:478:10) 

我找不到任何其他人有这些问题,所以它一定是我试图利用MaterializeCSS的方式。 我究竟做错了什么? 我只想使用materialize.toast("Message sent", 5000);显示失败的面包materialize.toast("Message sent", 5000); 。 没有什么花哨。

Materializecss是gui / website的前端框架,而不是服务器端的js应用程序

你是否明确需要jQuery? 在物化css之前呢?

我在node_modules/jquery/README文件中find了以下内容:

节点

要在Node中包含jQuery,首先使用npm进行安装。

npm install jquery

要使jQuery能够在Node中工作,需要一个带有文档的窗口。 由于在Node中本地不存在这样的窗口,所以可以通过诸如jsdom之类的工具来模拟 。 这可以用于testing目的。

require("jsdom").env("", function(err, window) { if (err) { console.error(err); return; } var $ = require("jquery")(window); });

希望能帮助你。

Materializecss是gui / website的前端框架,而不是服务器端的js应用程序。 你不能在服务器端node.js上编写你的实现材料。 你必须链接物化css文件和物化js文件的HTML文件,你要实现。 你可以从下面的链接下载物化css和js文件。

开始使用materialize-css可能对您的参考很有用。 教程点环境设置对您的参考很有用。

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head> <title>Sample materialization</title> <!--Import Google Icon Font--> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Import materialize.css--> <!--materialize.css from my website directory stylesheets/--> <link type="text/css" rel="stylesheet" href="stylesheets/materialize.css" media="screen,projection"/> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <!--Import jQuery before materialize.js--> <!--Import materialize.js from my website directory materialization--> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="materialization/materialize.js"></script> <!--simple materialized division--> <div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div> </body> </html>