Ember Bootstrap for Ember.js 使用指南

最新推荐文章于 2024-09-16 07:25:09 发布

宁烈廷

最新推荐文章于 2024-09-16 07:25:09 发布

阅读量410

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00755/article/details/141245269

版权

Ember Bootstrap for Ember.js 使用指南

bootstrap-for-emberBootstrap for Ember.js项目地址:https://gitcode.com/gh_mirrors/bo/bootstrap-for-ember

1. 项目目录结构及介绍

本指南基于从 ember-addons/bootstrap-for-ember 获取的开源项目，旨在帮助您了解其基本架构并快速上手。

项目结构概述:

ember-bootstrap: 核心组件和库所在位置，包括自定义的Ember组件模仿Bootstrap行为。
app: 应用程序的主要工作区，包含组件、模板、路由等。
- components: 存放所有自定义的Ember组件，包括那些模拟Bootstrap功能的。
- templates: 包含应用的HTML布局和各页面的模板文件。
addon: 提供给其他Ember应用使用的部分，包含了不需要修改就能在应用中使用的代码和资源。
- templates: 特定于ember-bootstrap的模板文件。
config: 配置文件，特别是environment.js用于根据不同环境（开发、测试、生产）调整设置。
tests: 单元测试和集成测试的存放地。
ember-cli-build.js 或 app.js: 构建配置文件，决定如何编译应用，对于ember-bootstrap的引入和预处理器的选择在这里配置。
package.json: 项目依赖和脚本命令定义。

2. 项目的启动文件介绍

2.1 ember-cli-build.js / app.js

在传统Ember应用中，主要关注的是ember-cli-build.js。这个文件是构建流程的核心，它允许你配置如加载何种预处理器（Sass, Less等），添加第三方插件以及引入额外的库，例如Bootstrap CSS：

引入Bootstrap CSS: 对于不使用Embroider的应用，在此文件中通过app.import()方法添加Bootstrap样式表。
```
let app = new EmberApp(defaults, {
    // ...
    app.import('node_modules/bootstrap/dist/css/bootstrap.css');
});
```

而对于使用Embroider的现代Ember应用，配置通常位于app.js或对应的项目配置中。

2.2 index.html

虽然不直接属于“启动”文件范畴，但public/index.html在项目启动时加载，对于Bootstrap的JavaScript特性（如模态框和提示）的支持，你需要手动加入一个容器元素：

<div id="ember-bootstrap-wormhole"></div>

3. 项目的配置文件介绍

ember-cli-build.js: 此文件允许配置ember-bootstrap的特定选项，比如是否导入Bootstrap CSS或者排除特定组件：

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-bootstrap': {
      importBootstrapCSS: false,
      exclude: ['bs-popover', 'bs-accordion']
    }
  });

  return app.toTree();
};