Ember CLI 使用教程
ember-cliThe Ember.js command line utility.项目地址:https://gitcode.com/gh_mirrors/em/ember-cli
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
ember-cliThe Ember.js command line utility.项目地址:https://gitcode.com/gh_mirrors/em/ember-cli