初始化 Emberjs 项目

Ember Guide

1. 初始化一个新的项目

1.1 生成项目

ember new ember-guide --no-welcome --yarn

其中--no-welcome 用于跳过ember-cli 初始化项目时自带的 welcome 组件。--yarn 是在初始化完成以后，就进行依赖的安装。
在命令行中运行

ember s

以后，打开localhost:4200 之，就能看到

Welcome to Ember

这就说明Ember的项目已经成功启动。

1.2 配置为Pods目录

目前项采起的是Pods目录，具体的设置为：

//  ./.ember-cli
{
    "disableAnalutics": true,
    "usePods": true
}

//  ./config/environment.js
module.exports = function(environment) {
    let ENV = {
        modulePrefix: 'ember-guide',
        podModulePrefix: 'ember-guide/modules',
        environment,
        rootURL: '/',
        locationType: 'auto',
    }
}

其中 ember-demo/modules 将在 app 文件夹下生成 modules文件夹，此为 pod 目录中的主文件夹，可自定义名称。
此后使用 ember g 命令即会在 app/modules 文件夹下生成相应的 文件。

• 删除 app/routes 文件夹;
• 删除 app/controllers 文件夹;
• 删除 app/components 文件夹;
• 删除 app/models 文件夹;
• 删除 app/templates 文件夹;

删除 app/templates 文件夹以后，别忘记从新生成 application 路由。

1.3 安装必要的插件

1. 使用 bootstrap v4:

ember install ember-bootstrap

利用 ember-bootstrap 的 blueprient 使用 CSS 预处理器 sass:

ember generate ember-bootstrap --preprocessor=sass

2.使用 css module:

ember install ember-css-modules ember-css-modules-sass

重启应用，便可。

// 自动引入依赖包
yarn add ember-auto-import --dev 

// mock数据
yarn add ember-cli-mirage --dev

// truth helper
yarn add ember-truth-helper --dev

• mock Data
• truth helper usage

  至此，项目的整个 Init 过程就结束了。

Written by Frank Wang.