Ember.js环境搭建 #

一、环境要求 #

在开始安装Ember.js之前，请确保你的系统满足以下要求：

1.1 必需软件 #

软件 最低版本 推荐版本
Node.js 16.x 18.x+
npm 8.x 9.x+
Git 2.x 最新版

1.2 检查当前环境 #

bash 
# 检查Node.js版本
node --version

# 检查npm版本
npm --version

# 检查Git版本
git --version

二、安装Node.js #

2.1 使用官方安装包 #

访问 Node.js官网 下载LTS版本安装包。

2.2 使用nvm（推荐） #

nvm（Node Version Manager）允许你在同一台机器上管理多个Node.js版本。

macOS/Linux:

bash 
# 安装nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 重新加载配置
source ~/.bashrc  # 或 source ~/.zshrc

# 安装Node.js
nvm install --lts

# 使用LTS版本
nvm use --lts

Windows:

bash 
# 使用nvm-windows
# 下载地址: https://github.com/coreybutler/nvm-windows/releases

# 安装后执行
nvm install lts
nvm use lts

三、安装Ember CLI #

Ember CLI是Ember.js的命令行工具，用于创建项目、生成代码、运行测试等。

3.1 全局安装 #

bash 
# 使用npm安装
npm install -g ember-cli

# 验证安装
ember --version

3.2 Ember CLI常用命令 #

bash 
# 查看帮助
ember help

# 查看版本
ember version

# 创建新项目
ember new <project-name>

# 启动开发服务器
ember serve

# 构建项目
ember build

# 运行测试
ember test

四、创建第一个Ember项目 #

4.1 创建新项目 #

bash 
# 创建新项目
ember new my-ember-app

# 进入项目目录
cd my-ember-app

4.2 项目创建选项 #

bash 
# 使用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

4.3 启动开发服务器 #

bash 
# 启动开发服务器
ember serve

# 或简写
ember s

# 指定端口
ember serve --port 4201

# 指定host
ember serve --host 0.0.0.0

默认情况下，开发服务器运行在 http://localhost:4200。

五、开发工具配置 #

5.1 VS Code配置 #

推荐扩展：

  1. Ember Syntax - Ember模板语法高亮
  2. Glimmer Templates - Glimmer模板支持
  3. Ember JS (ES6) code snippets - 代码片段
  4. Prettier - 代码格式化
  5. ESLint - 代码检查

settings.json配置：

json 
{
  "files.associations": {
    "*.hbs": "handlebars",
    "*.gjs": "javascript",
    "*.gts": "typescript"
  },
  "emmet.includeLanguages": {
    "handlebars": "html"
  }
}

5.2 Ember Inspector #

Ember Inspector是浏览器开发工具扩展，用于调试Ember应用。

安装方式：

功能特性：

  • 查看路由树
  • 检查组件树
  • 查看数据模型
  • 性能分析
  • 依赖关系查看

5.3 ESLint配置 #

Ember项目默认包含ESLint配置，位于 .eslintrc.js。

javascript 
// .eslintrc.js
'use strict';

module.exports = {
  root: true,
  parser: '@babel/eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    requireConfigFile: false,
    babelOptions: {
      plugins: [
        ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
      ],
    },
  },
  plugins: ['ember'],
  extends: [
    'eslint:recommended',
    'plugin:ember/recommended',
    'plugin:prettier/recommended',
  ],
  env: {
    browser: true,
  },
  rules: {},
  overrides: [],
};

5.4 Template Lint配置 #

模板代码检查配置位于 .template-lintrc.js。

javascript 
// .template-lintrc.js
'use strict';

module.exports = {
  extends: 'recommended',
  rules: {
    'require-input-label': false,
  },
};

六、项目配置 #

6.1 环境配置 #

Ember使用 config/environment.js 管理环境配置。

javascript 
// config/environment.js
'use strict';

module.exports = function (environment) {
  let ENV = {
    modulePrefix: 'my-ember-app',
    environment,
    rootURL: '/',
    locationType: 'history',
    EmberENV: {
      FEATURES: {},
      EXTEND_PROTOTYPES: {
        Date: false,
      },
    },
    APP: {},
  };

  if (environment === 'development') {
    // 开发环境配置
  }

  if (environment === 'test') {
    // 测试环境配置
    ENV.locationType = 'none';
    ENV.APP.LOG_ACTIVE_GENERATION = false;
    ENV.APP.rootElement = '#ember-testing';
    ENV.APP.autoboot = false;
  }

  if (environment === 'production') {
    // 生产环境配置
  }

  return ENV;
};

6.2 目标浏览器配置 #

在 config/targets.js 中配置目标浏览器。

javascript 
// config/targets.js
'use strict';

const browsers = [
  'last 1 Chrome versions',
  'last 1 Firefox versions',
  'last 1 Safari versions',
];

module.exports = {
  browsers,
};

七、常用开发命令 #

7.1 代码生成命令 #

bash 
# 生成组件
ember generate component my-component
ember g component my-component

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

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

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

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

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

7.2 开发命令 #

bash 
# 启动开发服务器
ember serve

# 构建开发版本
ember build

# 构建生产版本
ember build --environment=production

# 运行测试
ember test
ember t

# 运行测试并监控
ember test --server
ember t -s

7.3 清理命令 #

bash 
# 清理构建缓存
ember clean

# 安装依赖
npm install
# 或
yarn install

八、常见问题解决 #

8.1 端口被占用 #

bash 
# 查找占用4200端口的进程
lsof -i :4200

# 终止进程
kill -9 <PID>

# 或使用其他端口
ember serve --port 4201

8.2 Node版本问题 #

bash 
# 使用nvm切换Node版本
nvm use 18

# 确保使用LTS版本
nvm use --lts

8.3 依赖安装失败 #

bash 
# 清除npm缓存
npm cache clean --force

# 删除node_modules重新安装
rm -rf node_modules package-lock.json
npm install

8.4 构建错误 #

bash 
# 清理构建缓存
ember clean

# 删除临时文件
rm -rf tmp dist

# 重新构建
ember build

九、总结 #

本章我们完成了Ember.js开发环境的搭建：

  1. 安装Node.js - 使用nvm管理Node版本
  2. 安装Ember CLI - 全局安装命令行工具
  3. 创建项目 - 使用ember new命令
  4. 配置开发工具 - VS Code扩展和Ember Inspector
  5. 了解常用命令 - 代码生成和开发命令

现在你已经准备好开始Ember.js开发了！下一章我们将创建第一个Ember应用。

最后更新：2026-03-28