我运行了以下命令:
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);
显示失败 toast。没什么花哨的。
Materializecss 是一个用于 gui/网站的前端框架,而不是用于服务器端 js 应用程序的
您是否也明确需要 jQuery?也在materialize-css之前?
我在
node_modules/jquery/README
文件中发现以下内容:
节点
要将 jQuery 包含在 Node 中,请首先使用 npm 安装。
npm install jquery
要使 jQuery 在 Node 中工作,需要一个包含文档的窗口。由于 Node 中原生不存在这样的窗口,因此可以通过 jsdom 等工具来模拟。这对于测试目的很有用。
require("jsdom").env("", function(err, window) { if (err) { console.error(err); return; } var $ = require("jquery")(window); });
希望对您有帮助。
Materializecss 是 gui/网站的前端框架,而不是服务器端 js 应用程序的前端框架。您无法在服务器端 Node.js 上编写 Materialise 内容。您必须将具体化 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>
如果您使用handlebars,通常可以通过位于layouts文件夹中的main.handlebars文件中的标签来调用Materialize.css,只需在app.js中设置静态文件调用即可。
在 app.js 中:
app.use (express.static ('public'))
在 main.handlebars 中:
link rel = "stylesheet" href = "css / materialize.min.css"
配置完成后,静态文件夹,href 获取以下路径 public/css/materialize.min.css
这是 Node.js 中带有 Materialize 的项目链接:
rmidia.herokuapp.com
使用 Vanilla Javascript 启动 Materialize 组件而不是使用 jquery,它会起作用。
有点晚了。但您可以使用 CDN。入门指南现在有相关说明。 https://materializecss.com/getting-started.html