如何将 Semantic-UI 与 Aurelia-Cli 集成？

Question

我想创建一个带有语义的自定义主题-ui，但他们还没有对 Aurelia 的官方支持，并且在 npm install semantic-ui --save 之后会弹出很多不需要的错误。我想要一个明确的答案和 aurelia.json 语义的依赖代码。谢谢

Answer 1

1. aurelia.json依赖

"dependencies": [
  ...,
  {
    "name": "semantic-ui",
    "path": "../node_modules/semantic-ui/dist",
    "main": "semantic.min.js",
    "resources": [
      "semantic.min.css"
    ]
  }
]

旁注：您可能还必须使用 "deps" 值列出依赖项。首先尝试不使用它，如果需要，您可以查看此 repo 需要的其他库。

2。导入 JavaScript 文件

在 app.js 或 每个视图模型中 您将使用该库，使用其中的一个导入（一次尝试一个；其中一个可能有效）。

import * from 'semantic-ui';
import 'semantic-ui';

3。需要 CSS

在 app.html 或 每个视图中 您将使用该库，请使用以下 require 语句。

<template>
  <require from="semantic-ui/semantic.min.css"></require>
  <!-- rest of your code here -->
</template>

4.旧式前缀

如果上述 none 有效，请使用 aurelia.json 的 prepend 部分（在 dependencies 部分之前）将其作为遗留存储库导入，如下所示：

"prepend": [
  // probably a couple other things already listed here...
  "node_modules/semantic-ui/dist/semantic.min.js"
],

Answer 2

首先：如果您不需要自定义语义UI，您可以使用预构建的包来简化，可下载为 ZIP。有关该提示，请参阅语义 UI "Getting Started"。

这并不优雅，但它有效：

我假设你想要完成包，包括构建工具和所有东西。这使您可以选择自定义、更改主题等。

这些是我看到的问题：

SemanticUI使用的是Gulp3.x，是正式版，而Aurelia CLI使用的是Gulp4，是alpha。如果您尝试将 npm install 语义化到 Aurelia 项目中，这会出错。
在 aurelia.json 中导入 CSS/JS 文件仅适用于 node_modules/semantic-ui/dist 版本 -- 不适用于内置的 semantic/dist 版本，这意味着您的自定义不包括在内.

我的solution/workaround:

在单独的文件夹中安装语义 UI，例如aurelia_project_root/SUI。解决了 Gulp 版本问题。您现在可以从该目录中 gulp build 您的语义发行版。注意：您需要在 Aurelia 项目外部创建文件夹，然后将其作为子文件夹移入 Aurelia 项目根目录。这会在 SUI/node_modules.

编辑 aurelia.json 以添加 SUI 和 JQuery:

  "jquery",
  {
    "name": "semantic-ui",
    "path": "../SUI/node_modules/semantic-ui/dist",
    "main": "semantic.min.js",
    "resources": [
      "semantic.min.css"
    ]
  }

要安装 JQuery：npm install jquery --save。

在 SUI 中编辑 semantic.json 以更改输出目录以将构建的文件保存在 node_modules:

"output": {
  "packaged": "..\node_modules\semantic-ui\dist\",
  "uncompressed": "..\node_modules\semantic-ui\dist\components\",
  "compressed": "..\node_modules\semantic-ui\dist\components\",
  "themes": "..\node_modules\semantic-ui\dist/themes/"
},

这是因为问题 2 - Aurelia CLI 只能导入 SUI 只要它在 node_modules 内（可能是我做错了什么）。

那么工作流就变成了：

更改 SUI 属性
build SUI（gulp build inside SUI/semantic）
build/run奥蕾莉亚(au build)

当然，您可以在 aurelia 中更新 gulp 任务以改进此工作流程。

您还需要 link 或复制 fonts/pngs。现在我只是从你的 Aurelia 项目文件夹中 ln -s path-to-dist/themes themes symlink编辑了它。

你的HTML：

<require from="semantic-ui/semantic.min.css"></require>
...
<select ref="states" class="ui fluid search dropdown" multiple="">
  <option value="">State</option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
...
</select>

代码隐藏：

import * as $ from 'jquery' // import $ from 'jquery';
import 'semantic-ui';

attached() {
   $(this.states).dropdown()
}

这应该会给您一个非常酷的下拉菜单。

如何将 Semantic-UI 与 Aurelia-Cli 集成？

How to integrate Semantic-UI with Aurelia-Cli?

semantic-ui

aurelia