1.需要分析
豊富な機能：豊富なコンポーネントのセット、カスタムテーマ、国際。
ドキュメント＆デモ：優しいドキュメントとデモ、低メンテナンスコスト、複数言語のサポートを提供します。
インストールの紹介：NPMサポートCDNの道と方法、および需要の導入を支援します。
エンジニアリング：開発、テスト、構築、展開、継続的インテグレーション。
豊富な機能
豊富なコンポーネント
コアコンポーネントライブラリやコンポーネント、設計原則要素-UIコンポーネントを初めて目：一貫性、フィードバック、効率的かつ制御可能。公式サイトで詳細な説明が、私は要素-UI開発チームの後ろに立てないだろう、我々はまたのために、企業内の要素-UIの創設者sofish声や位置を恩恵を受け、強力な設計チームを持っていますこのような良いリソースへ。だから、要素、UIコンポーネントの外観、色、対話は非常によくやっています。
基本的なコンポーネントライブラリとして、非常に重要な側面は、豊富なコンポーネントの一種でもあります。6つのカテゴリー、すなわち、基本的な構成要素、クラス構成要素の形態、データクラス構成要素、クラス構成要素のヒント、クラス構成要素及びナビゲーションコンポーネントの他のタイプに分け、現在アセンブリ要素-UI公式55、。これらの豊富な基本コンポーネントは、B事業開発のニーズにPC側の大部分を満たすことができます。
非常に多くの部品の開発、あなたは多くの時間と労力を必要とするので、非常に感謝要素-UIチームがあるはず、私たちにこれらの基本的なコンポーネントを提供し、我々は多くの時間を節約し、二次開発に基づいてそれらを作ります。
なく、srcディレクトリ内の要素-UIコンポーネントのソースコードのパッケージディレクトリのメンテナンス。monorepoを使用してはならないそうするためにされ、私もレルナパッケージ管理ツールを見つけられませんでした、私はそうすることの目的は、導入をサポートするために必要なコンポーネントのそれぞれは、個別にパッケージ化することができるようにすることですね。しかし、実際には、私はSRC / componentsディレクトリのメンテナンスにアセンブリコードコンポーネントライブラリをお勧めします、この目標は、コードのメンテナンスを整理するために、必ずしもそうではありません達成したい、その後、WebPACKの各コンポーネントを行うことができ、構成スクリプトを変更別々にパッケージだけでなく、オンデマンドサポートの導入、srcディレクトリ内のソースコードは、常に、より合理的です。
カスタムテーマ
主要な機能要素-UIがカスタムテーマをサポートすることで、あなたは、オンラインのテーマエディタを使用することができますが、すべてのグローバルコンポーネント要素のデザイントークンを変更してカスタマイズすることができ、あなたは簡単に変更した後、リアルタイムのビジュアルスタイルをプレビューすることができます。また直接ダウンロードするための完全なスタイルのパッケージを生成するために、新しいカスタムスタイルに基づいてすることができ、その後、どのようにそれを行うのですか？
スタイルパッケージ/テーマチョークファイル内の要素-UIコンポーネント、一般的なスタイル、それは独立して配布することができます。などの色、フォント、線のスタイル、の要素-UIコンポーネントのスタイルは、パッケージ/テーマ-チョーク/ SRC /共通/ var.scssに、我々はこれらの変数の定義を参照することができ、導入の仕方によって可変であるので、私はこれらの変数を変更するため、より多くのトピックは、便利な提供を行うには、[テーマ変更コンポーネントを達成することができます。
基本原則を理解し、オンライン交換のテーマを行うことも難しいことではありません、私はフロントラインインタラクティブカスタムテーマのセクションに詳細に話し、興味のある学生は、自分のためのソースを見ることができ、examplesディレクトリはないだろう、私はここに何かを言います自然の原則。
あなたはこのような構成を通過することができますテーマを維持するなど、サーバのニーズ、の助けを借りて、オンラインの皮、およびリアルタイムプレビューをしたい、ユーザーが新しいテーマの設定を生成し、一連の操作の後に行う、この構成では、インターフェイスが送信方法で伝えますサーバー、サーバーはこの構成によるとリターンを行います（スキームの具体的な実装はオープンソースではないが、一般的にいくつかの変数置換を行い、その後、コンパイルされます）新しいCSSを生成し、新しいCSSスタイルは、スイッチングテーマに達し、デフォルトのスタイルを上書きします目的。
インストールと導入
実際、要素-uiパッケージは、CSSやJS、政府はまた、提供している例のすべてのコンポーネントを生成します。
-
<!-- 引入样式 --> -
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -
<!-- 引入组件库 --> -
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
エンジニアリング
フロントエンドが高いと、それはそれのエンジニアリング面で物事を行っているコンポーネントライブラリとして設計され、要素、UIの高い要件？
ために、地元の開発とデバッグを容易にするため、WebPACKのと構成されたホットリロードし;使用を最初にしても、ルールESint構成の拡張としてeslint-CONFIG-elemefeを書いて、あなたはESLintを使用コーディングスタイルの一貫性を確保するために、開発段階であります私たちは公共のsrcディレクトリにモジュールの数に依存モジュラーコンポーネントのアイデアを開発し、機能分割ディレクティブ、ロケール、ミックスイン、トランジション、utilsのモジュールに基づきます。
各成分の調製のためのユニットテストは、テストフレームカルマを使用して、試験に続いて、そしてトラビスCI試験を使用して統合しました。
一例として、側面、要素、UI記述されたロットNPMスクリプト、このスクリプトにDISTを構築することにより、その後：
"DIST" ：「NPMの実行クリーン&&のNPMの実行ビルド：WebPACKの--config構築/ webpack.conf.js &&のWebPACK --config構築/ webpack.common.js &&のWebPACK --config構築/ WebPACKの&& &&が実行糸くずをNPMファイル.component.js && NPM実行ビルド：utilsの&& NPMの実行ビルド：テーマ」：&&は、ビルドを実行NPM UMD
これは、順番に内部の複数のコマンドを実行します最終的にはlibディレクトリおよびパッケージ化されたファイルを生成します。私は、興味のある学生が自分で勉強できるすべてのコマンドを導入するつもりはない、とここで私は、ビルド紹介したいと思います：物事を行うには、このスクリプトファイルを：
"ビルド：ファイル" ："ノードビルド/ binに/ iconInit.js＆ノードビルド/ binに/ビルドentry.js＆ノードビルド/ binに/版のi18n.js＆ノードビルド/ binに/ version.js" 、
利益はそれほど完全である、ここで、アイコン、エントリー、国際化、バージョンのビルド/ binディレクトリにあるいくつかのノードのスクリプトの実装が続くなど、その内容は、いくつかのルールに従って、IOファイルをして行っている一連の初期化を行いますドキュメントを生成するための自動化ツールの手段、および人工的なハエよりも効率的で、操作のこの波は、私たちの研究と応用の非常に価値があります。
最後に、展開はこのパブのNPMスクリプトによって完成されています。
"パブ" ："NPMの実行ブートストラップ&& shのビルド/ git-release.sh && shをビルド/ release.sh &&ノードビルド/ binに/ GEN-indices.js && shのビルド/ deploy-faas.sh"
主に提出されたコードを達成するためのbashスクリプトのシリーズを実行して、マージされた全体のパブリッシングプロセスの自動化が完了するように、バージョン管理は、NPM、、、興味のある学生が自分を見ることができ、スクリプトの具体的な内容を公式サイトを公開
概要
これまでのところ、導入の全体的な設計要素-UIコンポーネントライブラリ、あなたが金持ちに加えて、これらのコンポーネントの後ろに見ることができ、ソリューションの完全なセットがまだある、多くの経験を学び、描画の価値がある、価値が不完全な場所考えるために、技術的な詳細の多くを掘ることができます。