node.js - 使用 Firebase、Material Design Components (MDC) 和 Node.js

转载作者：太空宇宙更新时间：2023-11-04 00:08:59

25

4

概述

我正在为一位 friend 开发一个网站(多页面)，我决定使用 Google 的 Web Material 设计组件 (MDC) 作为其样式的基础。我希望使用 Functions 和 Hosting 将其托管在 Firebase 上。

我已经为此工作了一个多星期了，现在已经可以使用 Node.js、Express 和 EJS 渲染多个页面，但我似乎无法理解 MDC 如何在这种环境中发挥作用。

<小时/>

问题

你以前看过这部作品吗？如果是这样，是如何完成的以及我应该从哪里开始？

<小时/>

旁注

我已经能够使用this quide让它在本地运行。以下是实现此功能的主要文件:

webpack.config.js

module.exports = [{
entry: './app.scss',
output: {
    // This is necessary for webpack to compile
    // But we never use style-bundle.js
    filename: 'style-bundle.js',
},
module: {
    rules: [{
        test: /\.scss$/,
        use: [
            {
                loader: 'file-loader',
                options: {
                    name: 'bundle.css',
                },
            },
            { loader: 'extract-loader' },
            { loader: 'css-loader' },
            {
                loader: 'sass-loader',
                options: {
                    includePaths: ['./node_modules']
                }
            },
        ]
    }]
},
}];

index.html

<html>
<head>
    <link rel="stylesheet" href="bundle.css">
</head>
<body>
    <button class="foo-button mdc-button">
        Button
    </button>
</body>
</html>

package.json

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "lint": "eslint .",
    "serve": "firebase serve --only functions",
    "shell": "firebase functions:shell",
    "start": "webpack-dev-server",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "dependencies": {
    "@material/button": "^0.36.0",
    "firebase-admin": "~5.12.1",
    "firebase-functions": "^1.0.3"
  },
  "devDependencies": {
    "css-loader": "^0.28.11",
    "eslint": "^4.12.0",
    "eslint-plugin-promise": "^3.6.0",
    "extract-loader": "^2.0.1",
    "file-loader": "^1.1.11",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.3",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.11.2"
  },
  "private": true
}

app.scss

@import "@material/button/mdc-button";

.foo-button {
  @include mdc-button-ink-color(teal);
  @include mdc-states(teal);
}

最佳答案

Firebase Slack 的一名成员为我指明了正确的方向，因此我不再需要帮助。提供了他们建议的屏幕截图的链接。

Sam Jackson's Response

基本上，我将使用 React 而不是普通的 Node.js。他们似乎开发了一个用于 React 的 MDC 版本，您可以在创建 React 项目时进行配置。

MDC React GitHub

关于node.js - 使用 Firebase、Material Design Components (MDC) 和 Node.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50865651/

25

4

0

文章推荐： node.js - Mongoose 排序并每个字段只获取一个

文章推荐： python - 图像大小无处缩小

文章推荐： python - functools reduce 就地修改原始数据框

文章推荐： node.js - 可以将 AWS Cognito 与 Node 一起使用吗？

javascript - react js。如何制作具有这种结构的组件: description of the component
我有以下代码。我无法理解应如何实现 ProjectCardDescription 组件，以便能够在 ProjectCard 组件中传递其描述我尝试过这个，但得到一个空组件: import React
javascript - Animated.Component/createAnimatedComponent(Component) 与 Component 有何不同？
我们正试图从 styled-components 项目中找出以下问题的原因:https://github.com/styled-components/styled-components/issues/
javascript - ./src/components/index.js 找不到模块 : Can't resolve './{Component}' in '/src/components'
将所有文件从 jsx 更改为 tsx 后，出现此错误: ./src/components/index.js Module not found: Can't resolve './Header' in
javascript - vuejs : can we give props to async component via dynamic component pattern ?
我正在努力遵循以下 vuejs 应用场景动态组件 + 异步组件模式。一切正常，但仍然只有一个问题:我怎样才能访问通过传入的 Prop 数据请看现场 fiddle : https://jsfiddl
reactjs - 和 Component() 的区别
我已经明白了Difference between React Component and React Element , 使用 JSX 基本上调用 React.createElement它返回一个元素
reactjs - 和 Component() 有什么区别？
我最近开始使用 JSX 元素语法而不是调用函数，因为它使代码更漂亮。但看起来又不太一样。令人惊讶的是，因为在 App.js 中，函数调用会导致无限循环(并引发错误)，但 JSX 元素可以工作。在 Da
javascript - Vue : components inside component
通过少量渲染来构建嵌套组件系统的好方法是什么？请参阅下面带有主要问题(“如何...”)的所需代码: tab.vue(子组件) export default {
components - 将对象建模为 "collections of components"的游戏引擎在运行时如何工作？
我正在编写一个轻量级游戏引擎，并且在为它做一些研究的同时，我遇到了许多令人信服的文章，它们提倡通过“组件集合”模型而不是“从具体类继承”模型来实现游戏对象。有很多优点: 可以使用数据组合对象驱动设计
src/app/reactive-form/reactive-form.component.html:47:48 - error TS2531: Object is possibly 'null'. src/app/reactive-form/reactive-form.component.ts(Src/app/reactive-form/reactive-form.component.html:47:48-错误TS2531：对象可能为‘Null’。Src/app/reactive-form/reactive-form.component.ts)
类型‘AbstractControl’上不存在属性‘Controls’。
reactjs - react : Is any descendant component a child component?
考虑以下示例: function Travel(props) { return ( ) } function Welcom
reactjs - 扩展 React.Component 与 Component
我刚刚加入了一个 React Native 项目，在那里我经常看到扩展 React.Component 和 Component 本身的类。示例: 类 SomeView 扩展了 React.Compo
javascript - React.Component 和 Component 有什么区别？
我见过两种访问 Component 的方法: import React from 'react'; class Foo extends React.Component { ... } 和 im
java - 我可以扩展 @Component 并创建另一个 @Component 类并一次只提供一个吗？
我有一个库 jar，我想将其提供给许多应用程序。我想要的行为是在库中创建一个通用的 spring 组件类。如果在应用程序中，没有扩展相同的组件，则使用公共(public)组件；如果它在应用程序中扩展，
java - Component.setBounds 调用 Component.repaint？
所以我正在制作一个游戏，我有 EnemyAI 以及 player，它们都扩展了 JPanel。世界有一个 null 布局，所以我正在使用 setBounds(); 来“移动”(我实际上只是移动世界图像
css - Styled-components:插值函数或 component.extend？
在 styled-component 中，您如何决定是应该使用插值函数来修改组件(通过传递 props )还是扩展现有组件。例如: const Button = styled.button`
java - h : component and a4j:components? 之间的差异
我搜索并获取了以下信息。请添加您的信息 h:commandbutton 与 a4j:commandButton 相同，唯一的区别是 a4j:commandButton 有额外的 ajax 请求。 a
javascript - Angular 5 循环依赖 : Component in Component
我目前在一个项目中，我们有一个动态“表单”/内容模型，其中我们有一个包含字段和占位符的模块，占位符可以包含更多模块，为我们提供递归/灵活的数据模型. 现在为了渲染这个，我们创建了一个组件来渲染模块，动
javascript - react : How to setState in child component from parent component?
我是 React 的新手，正在尝试设置一个 Bootstrap 模式来显示警报消息。在我的父 App.js 文件中，我有一个错误处理程序，它向 Modal.js 组件发送一个触发模态显示的 Prop
Angular 2+ : Component style keeps affecting other components
通过 background-color:red 获得主页组件写入其 scss，然后使用 background-color:green 获取用户组件写入它的 scss。我启动我的应用程序，我在家，背景是
svelte - 如何调用 svelte :component current component method?
我有这个基本的应用程序，其中一些组件具有公共(public) load 方法。对于某些操作，我想在当前 svelte:component 上调用该方法，但我不知道如何获取对组件实例的引用。如何做到这一

首页

博学

6Ren·AI

商城

node.js - 使用 Firebase、Material Design Components (MDC) 和 Node.js

概述

问题

旁注