Material Components for the Web Codelabs 教程

凤霞音Endurance

于 2024-08-27 08:37:43 发布

阅读量723

点赞数 13

本文链接：https://blog.csdn.net/gitblog_01036/article/details/141585982

版权

Material Components for the Web Codelabs 教程

material-components-web-codelabsCodelabs for Material Components for Web (MDC Web)项目地址:https://gitcode.com/gh_mirrors/ma/material-components-web-codelabs

1. 项目的目录结构及介绍

Material Components for the Web Codelabs 项目的目录结构如下：

material-components-web-codelabs/
├── mdc-101/
│   ├── complete/
│   │   └── index.html
│   └── starter/
│       └── index.html
├── mdc-102/
│   ├── complete/
│   │   └── index.html
│   └── starter/
│       └── index.html
├── mdc-103/
│   ├── complete/
│   │   └── index.html
│   └── starter/
│       └── index.html
├── mdc-111/
│   ├── complete/
│   │   └── index.html
│   └── starter/
│       └── index.html
├── mdc-112/
│   ├── complete/
│   │   └── index.html
│   └── starter/
│       └── index.html
├── .gitignore
├── LICENSE
└── README.md

目录结构介绍

mdc-101/, mdc-102/, mdc-103/, mdc-111/, mdc-112/: 这些目录分别对应不同的教程模块，每个模块包含 complete/ 和 starter/ 两个子目录。
- complete/: 包含已完成的项目文件。
- starter/: 包含项目的初始文件，供学习者从零开始构建。
.gitignore: 用于指定 Git 版本控制系统忽略的文件和目录。
LICENSE: 项目的开源许可证文件。
README.md: 项目的说明文档。

2. 项目的启动文件介绍

每个教程模块的启动文件位于 starter/ 目录下，例如 mdc-101/starter/index.html。这些文件是项目的起点，学习者将从这些文件开始构建项目。

启动文件示例

以 mdc-101/starter/index.html 为例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MDC-101 Starter</title>
  <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>
<body>
  <div class="mdc-layout-grid">
    <div class="mdc-layout-grid__inner">
      <div class="mdc-layout-grid__cell--span-12">
        <h1>MDC-101 Starter</h1>
      </div>
    </div>
  </div>
</body>
</html>

启动文件介绍

index.html: 包含基本的 HTML 结构，引入了 Material Components for the Web 的 CSS 和 JavaScript 文件。
页面结构：使用 mdc-layout-grid 布局，包含一个标题。

3. 项目的配置文件介绍

项目中没有显式的配置文件，但可以通过 package.json 文件来管理依赖和脚本。每个教程模块的 starter/ 目录下可能包含一个 package.json 文件，用于管理该模块的依赖。

配置文件示例

以 mdc-101/starter/package.json 为例：

{
  "name": "mdc-101-starter",
  "version": "1.0.0",
  "description": "Starter project for MDC-101",
  "main": "index.html",
  "scripts": {
    "start": "serve"
  },
  "dependencies": {
    "material-components-web": "^13.0.0"
  },
  "devDependencies": {
    "serve": "^13.0.2"
  }
}

配置文件介绍

name: 项目

material-components-web-codelabsCodelabs for Material Components for Web (MDC Web)项目地址:https://gitcode.com/gh_mirrors/ma/material-components-web-codelabs

凤霞音Endurance

关注

13
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Material Components for the Web Codelabs 教程

Material Components for the Web Codelabs 教程 material-components-web-codelabsCodelabs for Material Components for Web (MDC Web)项目地址:https://gitcode.com/gh_mirrors/ma/material-components-web-codelabs 1...
复制链接

扫一扫