Как интегрировать семантический интерфейс с 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". Сначала попробуйте это без этого, и если вам нужно, вы можете увидеть, какие другие библиотеки требуется для этого репо.

2. Импорт JavaScript файл

В любом app.js или каждый вид-модель вы будете использовать библиотеку, используйте один этого импорта (попробуйте их по одному за раз, один из них, скорее всего, будут работать).

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

3. Требовать CSS

В любом app.html или в каждый вид вы будете использовать библиотеку, используйте следующие требуют заявление.

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

4. Наследие предварять

Если ни один из перечисленных выше работ, не импортировать его в качестве унаследованного репо с использованием prepend раздел aurelia.json (перед секцией dependencies), как это:

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

Answer 2

Во-первых: Если вам не нужно настраивать семантический интерфейс, вы можете упростить, используя предварительно построенный пакет, загружаемый как ZIP. См. Semantic UI «Начало работы» для этой подсказки.

Это не шикарно, но это работает:

Я предполагаю, что вы хотите, чтобы завершить пакет с автоматической сборки и все. Это дает возможность настроить, изменять темы и т.д.

Эти проблемы я вижу:

1. Семантический UI использует глотком 3.x, который является официальной версией, в то время как Aurelia CLI использует Глоток 4 , который находится в альфа. Это дает ошибки, если вы попробуете npm install Семантик в проект Aurelia.
2. Импорт файлов CSS/JS в aurelia.json работает только с версией node_modules/semantic-ui/dist - не встроенная версия semantic/dist, что означает, что ваши настройки не включаются.

Мое решение/обходной путь:

1. Установка Semantic UI в отдельной папке, например, aurelia_project_root/SUI. Решает проблему версии Gulp. Теперь вы можете использовать gulp build свой семантический дистрибутив из этого каталога. Примечание. Вам необходимо создать папку вне проекта Aurelia, а затем перенести ее в качестве подпапки корня проекта Aurelia. Это дает локальную версию Gulp внутри SUI/node_modules.

2. Редактировать aurelia.json добавить СУЙ и 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.

Edit 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 только способен импортировать СУЙ до тех пор, как это внутри node_modules (возможно, что-то я делаю неправильно).

Затем рабочий процесс становится:

1. изменения SUI свойства
2. сборки SUI (gulp build внутри SUI/семантический)
3. сборки/запуска Aurelia (au build)

Конечно, вы может обновить ваши задачи глотки в aurelia, чтобы улучшить этот рабочий процесс.

Вам также потребуется связать или скопировать шрифты/png. Пока я только что связал это, ln -s path-to-dist/themes themes от вас папка проекта Aurelia.

Ваш 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> 

Code-за:

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

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

Это должно дать вам очень крутая раскрывающийся.