初始化 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.