如何在nodejs中使用MaterializeCSS?
我已经运行了以下命令:
npm install materialize-css --save npm install hammerjs --save npm install jquery --save
然后在我的app.js
, var 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>