Ember Async Button 项目教程
1. 项目的目录结构及介绍
Ember Async Button 项目的目录结构遵循典型的 Ember CLI 项目结构。以下是主要目录和文件的介绍:
ember-async-button/
├── app/
│ ├── components/
│ │ └── async-button.js
│ └── templates/
│ └── components/
│ └── async-button.hbs
├── config/
│ └── environment.js
├── tests/
│ ├── integration/
│ │ └── components/
│ │ └── async-button-test.js
│ └── unit/
│ └── components/
│ └── async-button-test.js
├── vendor/
├── package.json
├── ember-cli-build.js
└── README.md
- app/: 包含应用程序的源代码,包括组件、模板、路由等。
- components/: 存放组件的 JavaScript 文件。
- templates/components/: 存放组件的 Handlebars 模板文件。
- config/: 包含应用程序的配置文件。
- environment.js: 配置应用程序的环境变量。
- tests/: 包含单元测试和集成测试。
- integration/components/: 存放组件的集成测试。
- unit/components/: 存放组件的单元测试。
- vendor/: 存放第三方库和工具。
- package.json: 定义项目的依赖和脚本。
- ember-cli-build.js: 配置 Ember CLI 构建过程。
- README.md: 项目的说明文档。
2. 项目的启动文件介绍
Ember Async Button 项目的启动文件主要是 app/app.js
和 config/environment.js
。
- app/app.js: 这是 Ember 应用程序的入口文件,负责初始化应用程序并加载必要的模块。
import Application from '@ember/application';
import Resolver from 'ember-resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';
const App = Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver
});
loadInitializers(App, config.modulePrefix);
export default App;
- config/environment.js: 配置应用程序的环境变量,包括开发、测试和生产环境的不同设置。
'use strict';
module.exports = function(environment) {
let ENV = {
modulePrefix: 'ember-async-button',
environment,
rootURL: '/',
locationType: 'auto',
EmberENV: {
FEATURES: {
// 在这里添加 Ember 特性
},
EXTEND_PROTOTYPES: {
// 禁用日期原型扩展
Date: false
}
},
APP: {
// 在这里添加应用程序的配置
}
};
if (environment === 'development') {
// 开发环境配置
}
if (environment === 'test') {
// 测试环境配置
}
if (environment === 'production') {
// 生产环境配置
}
return ENV;
};
3. 项目的配置文件介绍
Ember Async Button 项目的主要配置文件是 config/environment.js
。这个文件负责定义应用程序在不同环境下的配置。
- environment: 定义当前的环境(开发、测试、生产)。
- modulePrefix: 定义模块前缀,用于构建过程中的模块路径。
- rootURL: 定义应用程序的根 URL。
- locationType: 定义路由的位置类型。
- EmberENV: 配置 Ember 的环境设置,包括特性开关和原型扩展。
- APP: 应用程序的配置,可以在这里添加自定义配置。
'use strict';
module.exports = function(environment) {
let ENV = {
modulePrefix: 'ember-async-button',
environment,
rootURL: '/',
locationType: 'auto',
EmberENV: {
FEATURES: {
// 在这里添加 Ember 特性
},
EXTEND_PROTOTYPES: {
// 禁