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