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 安装必要的插件
- 使用
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.