@choiceform/ui-foundation

@choiceform/ui-foundation

简介

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

特性

以下模块的名字前面带有🌟符号的，代表会随着默认蓝本安装在使用 ui-foundation 的 addon／app 中，而不带🌟符号则需要你按照需求自选安装。如果你需要删除默认安装的模块，可以使用 yarn remove / npm uninstall 或者手动更改 package.json 来完成。

样式系统

• 🌟 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 接口来访问设备的信息。 ⚠️ 注意：device.js 用于判断跨设备的变化固然好用，但是 device.js 也会带来用于实时监测的消耗，这也是它不在默认安装蓝本中的主要原因。如果确实需要请参考配置选项说明。 ⚠️ 注意：ui-foundation 没有将 device.js 注册为 ES2015 兼容的模块或者是可用于依赖注入的 service，请直接使用全局对象 window.device 进行引用。如果特定的组件有封装的需求，可以禁止 ui-foundation 加载 device.js 然后自己实现对 device.js 的封装。

UI 基础构件

• TODO

安装

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

• 在创建好的 ember addon / 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 文件内，内有详细的注释简介，请自行参考并按上文的方法进行定制化配置。