Ember CLI #

一、Ember CLI概述 #

Ember CLI是Ember.js的官方命令行工具，提供了完整的项目开发工作流：

项目创建和初始化
代码生成（蓝图）
开发服务器
构建和打包
测试运行
插件管理

1.1 安装 #

bash

# 全局安装
npm install -g ember-cli

# 验证安装
ember --version

# 输出示例
ember-cli: 5.0.0
node: 18.17.0
os: darwin arm64

1.2 基本命令结构 #

bash

ember <command> [options] [arguments]

# 示例
ember new my-app
ember generate component user-card
ember serve --port 4201

二、项目创建 #

2.1 创建新项目 #

bash

# 创建新项目
ember new my-app

# 创建项目并使用yarn
ember new my-app --yarn

# 创建项目并使用pnpm
ember new my-app --pnpm

# 跳过git初始化
ember new my-app --skip-git

# 跳过npm安装
ember new my-app --skip-npm

2.2 项目初始化 #

bash

# 在现有目录初始化
ember init

# 强制覆盖现有文件
ember init --force

2.3 创建插件 #

bash

# 创建插件项目
ember addon my-addon

# 创建引擎
ember engine my-engine

三、代码生成 #

3.1 生成命令概览 #

bash

ember generate <blueprint> <name> [options]
# 简写
ember g <blueprint> <name>

3.2 常用生成命令 #

路由 #

bash

# 生成路由
ember generate route about
ember g route about

# 生成嵌套路由
ember g route posts/new

# 生成路由并跳过模板
ember g route about --skip-template

生成文件：

text

app/routes/about.js
app/templates/about.hbs
tests/unit/routes/about-test.js

组件 #

bash

# 生成组件
ember generate component user-card
ember g component user-card

# 生成模板only组件
ember g component user-card --template-only

# 生成类only组件
ember g component user-card --no-template

# 生成Pods结构组件
ember g component user-card --pod

生成文件：

text

app/components/user-card.js
app/components/user-card.hbs
tests/integration/components/user-card-test.js

模型 #

bash

# 生成模型
ember generate model post
ember g model post

# 带属性
ember g model post title:string body:text

# 带关联
ember g model comment body:text post:belongs-to:user

生成文件：

text

app/models/post.js
tests/unit/models/post-test.js

控制器 #

bash

# 生成控制器
ember generate controller posts
ember g controller posts

生成文件：

text

app/controllers/posts.js
tests/unit/controllers/posts-test.js

服务 #

bash

# 生成服务
ember generate service session
ember g service session

生成文件：

text

app/services/session.js
tests/unit/services/session-test.js

Helper #

bash

# 生成Helper
ember generate helper format-date
ember g helper format-date

生成文件：

text

app/helpers/format-date.js
tests/unit/helpers/format-date-test.js

Modifier #

bash

# 生成Modifier
ember generate modifier autofocus
ember g modifier autofocus

生成文件：

text

app/modifiers/autofocus.js
tests/integration/modifiers/autofocus-test.js

3.3 资源生成 #

bash

# 生成完整资源（路由+模板+模型+测试）
ember generate resource post
ember g resource post

# 带属性
ember g resource post title:string body:text

生成文件：

text

app/models/post.js
app/routes/posts.js
app/templates/posts.hbs
tests/unit/models/post-test.js
tests/unit/routes/posts-test.js
tests/acceptance/posts-test.js

3.4 其他生成命令 #

bash

# 生成适配器
ember g adapter application
ember g adapter post

# 生成序列化器
ember g serializer application
ember g serializer post

# 生成转换器
ember g transform date

# 生成初始化器
ember g initializer session

# 生成实例初始化器
ember g instance-initializer session

3.5 销毁命令 #

bash

# 销毁生成的代码
ember destroy component user-card
ember d component user-card

# 销毁路由
ember d route about

# 销毁模型
ember d model post

四、开发服务器 #

4.1 启动服务器 #

bash

# 启动开发服务器
ember serve
ember s

# 指定端口
ember serve --port 4201

# 指定host
ember serve --host 0.0.0.0

# 指定环境
ember serve --environment production

# 禁用live reload
ember serve --live-reload false

# 指定proxy
ember serve --proxy http://api.example.com

4.2 开发服务器选项 #

选项	说明	默认值
`--port`	端口号	4200
`--host`	主机地址	localhost
`--environment`	环境	development
`--live-reload`	热重载	true
`--live-reload-port`	热重载端口	7020
`--proxy`	API代理	-
`--secure-proxy`	HTTPS代理	true
`--ssl`	启用SSL	false
`--ssl-key`	SSL密钥文件	-
`--ssl-cert`	SSL证书文件	-

4.3 环境变量 #

bash

# 设置环境变量
PORT=4201 ember serve

# 或
ember serve --port 4201

五、构建命令 #

5.1 开发构建 #

bash

# 开发环境构建
ember build

# 输出到指定目录
ember build --output-path dist/dev

# 监听模式
ember build --watch

5.2 生产构建 #

bash

# 生产环境构建
ember build --environment production

# 简写
ember build -prod

# 输出路径
ember build -prod --output-path dist/prod

5.3 构建输出 #

text

dist/
├── assets/
│   ├── my-app.js
│   ├── my-app.css
│   ├── vendor.js
│   └── vendor.css
├── index.html
├── robots.txt
└── crossdomain.xml

六、测试命令 #

6.1 运行测试 #

bash

# 运行所有测试
ember test
ember t

# 交互模式
ember test --server
ember t -s

# 指定浏览器
ember test --browser chrome

# 指定测试文件
ember test --filter "user-card"

# 指定测试模块
ember test --module "Integration | Component | user-card"

# 指定测试路径
ember test --path tests/integration/components/user-card-test.js

6.2 测试选项 #

选项	说明
`--server`	交互模式
`--browser`	浏览器选择
`--filter`	过滤测试
`--module`	指定模块
`--path`	指定文件
`--reporter`	测试报告格式
`--silent`	静默模式

6.3 CI环境测试 #

bash

# CI环境运行测试
ember test --path dist

# 使用testem配置
ember test --config testem.js

七、插件管理 #

7.1 安装插件 #

bash

# 安装插件
ember install ember-cli-sass
ember i ember-cli-sass

# 安装指定版本
ember install ember-cli-sass@^10.0.0

# 从git安装
ember install git+https://github.com/user/ember-addon.git

7.2 常用插件 #

bash

# 样式预处理
ember install ember-cli-sass
ember install ember-cli-less

# TypeScript支持
ember install ember-cli-typescript

# 测试工具
ember install ember-qunit
ember install ember-mocha

# 数据可视化
ember install ember-highcharts
ember install ember-cli-d3

# UI组件库
ember install ember-bootstrap
ember install ember-paper

八、其他命令 #

8.1 信息查看 #

bash

# 查看版本
ember version
ember v

# 查看帮助
ember help
ember help generate

# 查看可用蓝图
ember help --verbose

8.2 清理命令 #

bash

# 清理构建缓存
ember clean

# 清理并重新安装
rm -rf node_modules && npm install

8.3 检查命令 #

bash

# 检查依赖更新
npm outdated

# 检查安全漏洞
npm audit

九、配置文件 #

9.1 .ember-cli #

json

{
  "skipGit": false,
  "disableAnalytics": false,
  "isTypeScriptProject": true,
  "useYarn": true
}

9.2 ember-cli-build.js #

javascript

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    // 应用配置
    'ember-cli-babel': {
      enableTypeScriptTransform: true,
    },

    // 构建配置
    fingerprint: {
      enabled: true,
      extensions: ['js', 'css', 'png', 'jpg', 'gif'],
    },

    // 开发服务器配置
    'ember-cli-uglify': {
      enabled: true,
    },
  });

  return app.toTree();
};

十、自定义蓝图 #

10.1 创建自定义蓝图 #

text

blueprints/
└── my-component/
    ├── files/
    │   └── app/
    │       └── components/
    │           └── __name__.js
    └── index.js

10.2 蓝图定义 #

javascript

// blueprints/my-component/index.js
'use strict';

module.exports = {
  description: '生成自定义组件',

  locals(options) {
    return {
      name: options.entity.name,
      className: options.entity.name.split('-').map(capitalize).join(''),
    };
  },

  afterInstall(options) {
    console.log('组件已生成');
  },
};

function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

十一、常用命令速查表 #

命令	说明
`ember new`	创建新项目
`ember serve`	启动开发服务器
`ember build`	构建项目
`ember test`	运行测试
`ember g route`	生成路由
`ember g component`	生成组件
`ember g model`	生成模型
`ember g controller`	生成控制器
`ember g service`	生成服务
`ember g resource`	生成资源
`ember install`	安装插件
`ember destroy`	销毁代码
`ember version`	查看版本
`ember help`	查看帮助

十二、总结 #

Ember CLI是Ember开发的核心工具：

功能	命令
项目创建	`ember new`
代码生成	`ember generate`
开发服务器	`ember serve`
构建	`ember build`
测试	`ember test`
插件管理	`ember install`

熟练使用Ember CLI可以大大提高开发效率，遵循CLI生成的约定也是Ember开发的最佳实践。