Ember Component CSS 项目教程

Ember Component CSS 项目教程

ember-component-cssAn Ember CLI addon which allows you to specify styles for individual components项目地址:https://gitcode.com/gh_mirrors/em/ember-component-css

1. 项目的目录结构及介绍

Ember Component CSS 项目的目录结构如下：

ember-component-css/
├── addon/
├── app/
├── bin/
├── config/
├── lib/
├── tests/
├── .bowerrc
├── .editorconfig
├── .ember-cli
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .npmignore
├── .template-lintrc.js
├── .watchmanconfig
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── ember-cli-build.js
├── index.js
├── package.json
├── testem.js
└── yarn.lock

目录结构介绍

• addon/: 包含插件的核心代码。
• app/: 包含应用程序的代码。
• bin/: 包含可执行文件。
• config/: 包含项目的配置文件。
• lib/: 包含库文件。
• tests/: 包含测试文件。
• .bowerrc: Bower 配置文件。
• .editorconfig: 编辑器配置文件。
• .ember-cli: Ember CLI 配置文件。
• .eslintignore: ESLint 忽略文件。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略文件。
• .npmignore: npm 忽略文件。
• .template-lintrc.js: 模板 lint 配置文件。
• .watchmanconfig: Watchman 配置文件。
• CHANGELOG.md: 项目变更日志。
• CONTRIBUTING.md: 贡献指南。
• LICENSE.md: 项目许可证。
• README.md: 项目说明文档。
• ember-cli-build.js: Ember CLI 构建配置文件。
• index.js: 项目入口文件。
• package.json: npm 包配置文件。
• testem.js: 测试配置文件。
• yarn.lock: Yarn 锁定文件。

2. 项目的启动文件介绍

index.js

index.js 是项目的入口文件，负责初始化插件并将其加载到 Ember 应用程序中。以下是 index.js 的简要介绍：

module.exports = {
  name: require('./package').name,

  included: function(app) {
    this._super.included.apply(this, arguments);
  }
};

• name: 插件的名称，从 package.json 中获取。
• included: 插件的包含方法，用于将插件加载到应用程序中。

3. 项目的配置文件介绍

ember-cli-build.js

ember-cli-build.js 是 Ember CLI 的构建配置文件，用于配置项目的构建过程。以下是 ember-cli-build.js 的简要介绍：

var EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
var CssImport = require('postcss-import');

module.exports = function(defaults) {
  var app = new EmberAddon(defaults, {
    postcssOptions: {
      compile: {
        enabled: true,
        plugins: [
          {
            module: CssImport
          }
        ]
      }
    }
  });

  return app.toTree();
};

• EmberAddon: Ember CLI 的构建工具类。
• postcssOptions: 配置 PostCSS 插件，例如 postcss-import。
• app.toTree(): 返回构建后的应用程序树。

package.json

package.json 是 npm 包配置文件，包含了项目的依赖、脚本和其他元数据。以下是 package.json 的简要介绍：

{
  "name": "ember-component-css",
  "version": "0.6.4",
  "dependencies": {
    "ember-cli-postcss": "^4.0.0",
    "postcss-import": "^12.0.1"
  },
  "ember-addon": {
    "configPath": "tests/dummy/config",
    "after": "ember-component-css"
  }
}

• name: 项目名称。
• version: 项目版本。
• dependencies: 项目依赖。
• ember-addon: Ember 插件配置，指定配置路径和加载顺序。

通过以上介绍，您可以更好地理解 Ember Component CSS 项目的目录结构、启动文件和配置文件。

ember-component-cssAn Ember CLI addon which allows you to specify styles for individual components项目地址:https://gitcode.com/gh_mirrors/em/ember-component-css