Ember CSS Modules 项目教程

1. 项目目录结构及介绍

ember-css-modules 是一个用于 Ember.js 应用程序的 CSS 模块化解决方案。以下是项目的目录结构及其基本介绍：

ember-css-modules/
├── app/                    # 应用程序的主要目录
│   ├── components/         # 存放所有组件的目录
│   ├── controllers/        # 存放所有控制器文件的目录
│   ├── helpers/            # 存放所有助手方法的目录
│   ├── models/             # 存放所有模型文件的目录
│   ├── routes/             # 存放所有路由的目录
│   ├── templates/          # 存放所有模板文件的目录
│   │   ├── components/     # 组件模板
│   │   ├── index.hbs        # 应用程序的主模板
│   │   └── ...              # 其他模板
│   ├── styles/             # 存放样式文件的目录
│   │   ├── app.css          # 应用程序的主要样式文件
│   │   └── ...              # 其他样式文件
│   └── ...                  # 其他应用级文件
├── blueprints/             # Ember CLI 蓝图的目录
├── brocfile.js             # 构建配置文件（如果使用 Ember CLI 1.x）
├── ember-cli-build.js      # 构建配置文件（如果使用 Ember CLI 2.x 或更高版本）
├── config/                 # 配置文件目录
│   ├── environment.js      # 环境配置
│   ├── torii.js            # torii 配置（如果使用 torii）
│   └── ...                  # 其他配置文件
├── migrations/             # 数据库迁移脚本（如果使用 Ember Data）
├── node_modules/           # 存放项目依赖的 Node.js 模块
├── package.json            # 项目信息和依赖
├── public/                 # 公共目录，包含图像、字体等静态资源
├── server/                 # 服务器端文件（如果使用 Ember CLI 的服务器功能）
├── testem.json             # Testem 配置文件，用于测试
├── tests/                  # 测试文件目录
└── ...                      # 其他项目文件

2. 项目的启动文件介绍

在 Ember 项目中，通常使用 Ember CLI 来创建和启动应用程序。以下是一些主要的启动文件：

• ember-cli-build.js：这是 Ember CLI 用来构建你的应用程序的主要配置文件。它负责编译应用程序的源码，并生成可用于生产的文件。

• index.html：这是应用程序的入口点。在开发模式下，Ember CLI 会自动生成这个文件，并包含必要的脚本和样式链接。

• app.js 或 app/index.js：这是 Ember 应用程序的起点。它导入了应用程序的所有组件、模型、路由等。

启动应用程序的步骤如下：

1. 在项目根目录下，运行 ember serve 命令。
2. Ember CLI 将启动一个本地开发服务器，并编译应用程序。
3. 在浏览器中访问 http://localhost:4200，查看运行的应用程序。

3. 项目的配置文件介绍

项目的配置文件主要位于 config 目录下。以下是一些重要的配置文件：

• config/environment.js：这个文件包含了不同环境下应用程序的配置，如开发环境、测试环境和生产环境。可以在这里设置 API 端点、密钥等环境特定的配置。

• config/torii.js：如果项目使用 torii 进行身份验证，这个文件用于配置 torii 提供者和相关的身份验证流程。

• config/ember-try.js：这个文件用于配置 Ember Try，一个用于在 CI 环境中测试多个 Ember 版本的工具。

每个配置文件都允许你自定义 Ember 应用程序的特定方面，以确保它按照你的需求运行。在修改这些文件时，请确保遵循 Ember 和 Ember CLI 的最佳实践。