Semantic-UIをAurelia-Cliと統合する方法は？

Question

私はsemantic-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"値を使用して依存関係を一覧表示する必要がある場合があります。最初にこれを試してみてください。必要があれば、このリポジトリに必要な他のライブラリを見ることができます。

app.jsか 中のいずれかで

2.インポートしたJavaScriptファイル

ライブラリを使うことになる各ビューモデル、一度にそれらを試してみてください（これらの輸入品のを使用します。1それらのうちのいくつかは動作する可能性が高い）。

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

3.文を必要とする以下を使用し、ライブラリを使うことになるapp.htmlまたは中のいずれかで

各ビューをCSSを必要としています。

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

：

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

4.レガシーは、上記の作品のどれもが、このように（dependenciesセクションの前に）aurelia.jsonのprependセクションを使用して、レガシーレポとしてそれをインポートしていない場合は

を付加しました

Answer 2

最初に：セマンティックUIをカスタマイズする必要がない場合は、あらかじめビルドされたパッケージを使用して簡単にすることができます。パッケージはZIP形式でダウンロードできます。そのヒントについては、セマンティックUIの「はじめに」を参照してください。

これはエレガントではありませんが、それは動作します：

私はあなたがビルドツールとすべてに、パッケージを完了したいと仮定します。オーレリアCLIはがぶ飲み4を使用しながら、

1. は、セマンティックUIは、正式版ですがぶ飲み3.xのを、使用しています。それはこれらは私が見る問題となっている
   など、あなたにカスタマイズするオプション、変更のテーマを提供しますこれはアルファにあります。 npm install Aureliaプロジェクトの意味を試してみると、これはエラーになります。
2. aurelia.jsonのCSS/JSファイルをインポートすると、node_modules/semantic-ui/distバージョンでのみ動作します。これは、組み込まれたsemantic/distバージョンではなく、カスタマイズが含まれていないことを意味します。

私の解決策/回避策：

1. は、例えば、別のフォルダにセマンティックUIをインストールします。 aurelia_project_root/SUI。 Gulpのバージョンの問題を解決します。そのディレクトリ内からセマンティックディストリビューションgulp buildに今すぐアクセスできます。注意：Aureliaプロジェクトの外にフォルダを作成し、Aureliaプロジェクトルートのサブフォルダとして内部に移動する必要があります。これにより、SUI/node_modules内のGulpのローカルバージョンが得られます。 npm install jquery --save：jQueryのをインストールするには

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

：

編集aurelia.jsonはSUIとjQueryを追加します。

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である - アウレリアCLIのみ限りそのままSUIをインポートすることが可能であることnode_modules内で（おそらく何か私は間違っている）。

その後、ワークフローは次のようになります。

1. 変更SUIプロパティ
2. ビルドSUI（セマンティックSUI /内部gulp build）
3. ビルド/実行アウレリア（au build）もちろん

、あなたこのワークフローを改善するために、尿管内の麻薬を更新することができます。

また、フォント/ pngをリンクまたはコピーする必要があります。今のところ私はあなたにAureliaプロジェクトフォルダからln -s path-to-dist/themes themesをシンボリックリンクしました。

あなたの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() 
} 

これはあなたに非常にクールなドロップダウンを与える必要があります。