初始化 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 安装必要的插件
- 使用
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 过程就结束了。
相关推荐
worldsnow 2020-11-06
csdnxingyuntian 2020-11-02
丽丽 2020-10-30
bluecarrot 2020-09-17
哈嘿Blog 2020-08-16
qidiantianxia 2020-08-16
84931231 2020-07-30
ChenRuiyz 2020-07-26
yanqianglifei 2020-07-07
wbczyh 2020-07-05
BOBShe 2020-07-03
yang0cs 2020-06-28
fushilin 2020-06-28
清水寺小僧 2020-06-25
uileader 2020-06-21
wangyangsoftware 2020-06-16
cleanerxiaoqiang 2020-06-16
xuguiyi00 2020-06-14