Ember CLI 使用教程

2026-01-18 09:42:14作者：胡易黎Nicole

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

Ember CLI 项目的目录结构遵循一定的约定，以下是主要的目录和文件介绍：

my-app/
├── 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/: 包含第三方库文件。
ember-cli-build.js: 构建配置文件。
package.json: 项目依赖和脚本配置文件。

2. 项目的启动文件介绍

Ember CLI 项目的启动文件主要是 app/app.js 和 app/index.html。

`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;

`app/index.html`

这是应用程序的主 HTML 文件，包含应用程序的根元素和一些基本的 meta 标签：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MyApp</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {{content-for "head"}}

    <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
    <link rel="stylesheet" href="{{rootURL}}assets/my-app.css">

    {{content-for "head-footer"}}
  </head>
  <body>
    {{content-for "body"}}

    <script src="{{rootURL}}assets/vendor.js"></script>
    <script src="{{rootURL}}assets/my-app.js"></script>

    {{content-for "body-footer"}}
  </body>
</html>

3. 项目的配置文件介绍

Ember CLI 项目的主要配置文件位于 config/ 目录下。

`config/environment.js`

这是主要的配置文件，包含应用程序的环境配置：

'use strict';

module.exports = function(environment) {
  let ENV = {
    modulePrefix: 'my-app',
    podModulePrefix: 'my-app/pods',
    environment,
    rootURL: '/',
    locationType: 'auto',
    EmberENV: {
      FEATURES: {
        // Here you can enable experimental features on an ember canary build
        // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
      },
      EXTEND_PROTOTYPES: {
        // Prevent Ember Data from overriding Date.parse.
        Date: false
      }
    },

    APP: {
      // Here you can pass flags/options to your application instance