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.