Ember.js 项目教程

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

Ember.js 项目的目录结构遵循一定的约定，以下是一个典型的 Ember.js 项目的目录结构及其介绍：

ember-project/
├── app/
│   ├── adapters/
│   ├── components/
│   ├── controllers/
│   ├── helpers/
│   ├── models/
│   ├── routes/
│   ├── serializers/
│   ├── services/
│   ├── styles/
│   ├── templates/
│   └── index.html
├── config/
│   ├── environment.js
│   └── optional-features.json
├── public/
│   ├── assets/
│   └── index.html
├── tests/
│   ├── integration/
│   ├── unit/
│   └── test-helper.js
├── vendor/
├── .editorconfig
├── .ember-cli
├── .gitignore
├── .jshintrc
├── .travis.yml
├── bower.json
├── ember-cli-build.js
├── package.json
├── README.md
└── testem.js

目录介绍

• app/: 包含应用程序的主要代码，如组件、控制器、模型、路由、模板等。
• config/: 包含应用程序的配置文件，如 environment.js。
• public/: 包含静态资源文件，如图片、字体等。
• tests/: 包含测试代码，如集成测试和单元测试。
• vendor/: 包含第三方库文件。
• .editorconfig: 编辑器配置文件。
• .ember-cli: Ember CLI 配置文件。
• .gitignore: Git 忽略文件配置。
• .jshintrc: JSHint 配置文件。
• .travis.yml: Travis CI 配置文件。
• bower.json: Bower 依赖管理文件。
• ember-cli-build.js: Ember CLI 构建配置文件。
• package.json: npm 依赖管理文件。
• README.md: 项目说明文档。
• testem.js: 测试运行器配置文件。

2. 项目的启动文件介绍

Ember.js 项目的启动文件主要是 app/app.js，它负责初始化应用程序。以下是 app/app.js 的基本结构：

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;

启动文件介绍

• Application: 定义应用程序的主类。
• Resolver: 解析器，用于解析模块路径。
• loadInitializers: 加载初始化器，负责初始化应用程序的各个部分。
• config: 导入配置文件 config/environment.js。

3. 项目的配置文件介绍

Ember.js 项目的主要配置文件是 config/environment.js，它负责配置应用程序的环境变量。以下是 config/environment.js 的基本结构：

'use strict';

module.exports = function(environment) {
  let ENV = {
    modulePrefix: 'ember-project',
    podModulePrefix: 'ember-project/pods',
    environment: environment,
    rootURL: '/',
    locationType: 'auto',
    EmberENV: {
      FEATURES: {
        // 在这里添加 Ember 特性
      },
      EXTEND_PROTOTYPES: {
        // 禁用某些原型扩展
      }
    },

    APP: {
      // 在这里添加应用程序的配置
    }
  };

  if (environment === 'development') {
    // 开发环境配置
    ENV.APP.LOG_RESOLVER = true;
    ENV.APP.LOG_ACTIVE_GENERATION = true;
    ENV.APP.LOG_TRANSITIONS = true;
    ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
    ENV.APP.LOG_VIEW_LOOKUPS = true;
  }

  if (environment === 'test') {
    //