@choiceform/ui-foundation

@choiceform/ui-foundation

简介

ui-foundation 是整个 choice-ui 套件的根本基础组成，它为其他 ui 组件以及最终的应用程序提供最不可缺少的基本样式系统和编写样式需要用到的工具集合、变量、可重用模块定义等等；同时它也提供了诸如 normalize.css 之类的基础第三方资源（可选）。

特性

名称	类型	默认安装	默认打包
ember-css-modules	样式系统	✓	✓
ember-cli-node-assets	资源导入	✓	⎼
normalize.css	第三方资源	✓	✓
device.js	第三方资源	✓	✶

💡 提示：⎼ 代表此项不适用；✶ 代表作为独立资源输出，需要单独引用

样式系统

• ember-css-modules：提供本地化 CSS 模块功能。需要注意的是在使用 ui-foundation 的时候不要使用 ember-css-modules 实现的 @value 和 composes 功能，这两个功能的替代方案在随后的 PostCSS 部分有进一步说明

资源导入

• ember-cli-node-assets：提供针对 npm packages 的静态资源导入功能。几乎所有的第三方插件所携带的静态资源都通过这个 addon 进行统一的导入管理

第三方资源

• normalize.css：几乎所有前端项目都会使用的样式一致化／常态化库，它的目的是为了实现默认样式的跨浏览器统一性
• device.js：用于探测设备并为 HTML 文档添加识别用的样式命名空间，同时提供了 JavaScript 接口来访问设备的信息 ⚠️ 注意：ui-foundation 没有将 device.js 注册为 ES2015 兼容的模块或者是可用于依赖注入的 service，请直接使用全局对象 window.device 进行引用。如果特定的组件有封装的需求，可以禁止 ui-foundation 加载 device.js 然后自己实现对 device.js 的封装。

UI 基础构件

• TODO

安装

ui-foundation 是可以同时用于 addon 和／或 app 的，绝大部分情况下这两者的安装都不会有什么区别（不同的地方在下方会单独说明）。安装时的步骤和注意事项如下：

• 进入新建的或是已有的 ember addon / ember app 项目下
• 执行：ember install @choiceform/ui-foundation
  • 一定要用 ember install 而不是 yarn add / npm install，因为作为 addon，ui-foundation 会提供蓝本文件（blueprints），这些文件会覆盖默认的同名文件，并提供必要的代码来实现约定的配置
  • 如果你用了 yarn add / npm install 来安装 ui-foundation，你可以重新执行 ember install @choiceform/ui-foundation 或者手动执行 ember g ui-foundation 来生成这些蓝本文件

配置

默认约定配置（无须调整的部分）

ui-foundation 提供了一个 defaults.js 文件，里面包含了所有可配置项的默认值。这个文件并不包含在默认蓝本之中，因此你的 addon／app 是不会看见这个配置文件的（除非该 addon 还提供专属的配置文件，其使用方法应参考该 addon 的文档）。

如果要引用这个文件的内容，可以这么做：

const defaults = require('@choiceform/ui-foundation/defaults');

由于该配置文件保存的是默认值，所以直接修改它的内容是没有意义的。如果你要覆盖默认的配置，则应该：

const myOptions = Object.assign({}, defaults, {
  // 这里编写你需要覆盖的配置
});

默认蓝本生成的 ember-cli-build.js 文件里演示了这个用法。

💡提示：这些配置是在 ember-cli 构建系统启动时被读取和加载的，它们仅针对 node 环境而存在，因此在你的应用程序里引用／修改它们是毫无意义的。

某些 addon 会提供额外的，存放于 config/enviroment.js 文件内的配置选项，这些是用于运行时环境的，是可以随时读取甚至修改的，不要把这二者搞混。

可配置项说明

可用于定制化的配置选项存放在 defaults.js 文件内，内有详细的注释简介，请自行参考并按上文的方法进行定制化配置。