初始化 Emberjs 项目

37次阅读

共计 1102 个字符,预计需要花费 3 分钟才能阅读完成。

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-bootstrapblueprient 使用 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.

正文完
 0