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