九階の台、起于累土:コード良コンポーネント

本文は“コード良システムの使用と設計の実現”シリーズの文章の第3編です.

コード良の実装を紹介する文章をいくつか提供します。

開編:コード良の正しい開き方

コード良はどのように高拡張のオンラインホームページ制作プラットフォームの

を設計します

神笔はすでに开いて、私はどのように使うべきです

コンポーネントについて話している間に何について話していますか?

前の文章は大量のコード良エディタの使用例を提供して、読者がコード良エディタに対してすでに直観的な認識を持っていると信じています.
次の図はコード良エディタの構造図です.
エディタ全体のコアはコンポーネントであり、他の構成や機能はコンポーネントにサービスされていることがわかります.
コード良システムでは、コンポーネントはページを構成する基礎要素であり、各コンポーネントはそれぞれ特異な機能を担っている.例えば、ピクチャコンポーネントは1枚のピクチャを提示することができ、テキストコンポーネントは1段のテキストを展示することができる.一連のコンポーネントは一定の位置とスタイルに従ってページ内に配置され、さらに一定の配置を加えて、最終的にページを構成します.したがって,コンポーネントの能力は符号良の能力を決定し,コンポーネントの豊富さは符号良の強さを表す.
公式に提供されているほとんどのコンポーネントは、画像、テキスト、リッチテキスト、マルチキャストなど、機能的な基礎的なコンポーネントです.では、公式コンポーネント以外に、自作コンポーネントをコード良に統合する方法については、以下で説明します.

コード良コンポーネント開発

gods-pen

gods-penはnodejsに基づくコマンドラインツールであり、コード良コンポーネント開発の全プロセスをカバーするツールを提供する.

npm install gods-pen-cli -g # install gods-pen

ヘルプの表示gods-pen helpには、4つのサブコマンドがあります.

コンポーネントの作成

gods-pen create my-component

プロンプトに従ってコンポーネント名、説明を入力し、コンポーネント分類を選択
プロジェクトファイルの構造は以下の通りです.
これは典型的なvueエンジニアリングであることがわかります.そう、コード良コンポーネント自体は通常のvueコンポーネントと変わらないが、通常のvueコンポーネントに基づいて、コード良エディタでコンポーネントを識別し、構成できるように、いくつかの約束フィールドを追加した./src/index.vueは、先ほど作成したコンポーネントです.コンポーネント開発の主な仕事は,このコンポーネントに対して機能開発を行うことである./src/example.vueは、いくつかの簡単なコード例および説明を提供する.preview/ディレクトリの下のファイルは開発プレビューのために使用され、最終的にリリースされるとこのフォルダファイルはパッケージされません.必要に応じて、テストコンポーネントのパラメータなどのコードを必要に応じて変更できます.icon.pngコンポーネント・アイコンとしてコンポーネント・ウェアハウスにパブリッシュされます.このファイルを独自のコンポーネント・アイコンに置き換える必要があります.[README.md](http://readme.md)はコンポーネントの詳細な使用説明であり、markdownをサポートし、コンポーネントのパブリケーションとともにコンポーネントウェアハウスにアップロードされ、コードエディタでコンポーネントの説明を表示できます.
コンポーネントの作成に気づいたかどうかはわかりませんが、最後のステップでは、「属性構成コンポーネントを作成するかどうか」を選択します.属性構成コンポーネントとは、エディタでこのカスタムコンポーネントを使用してコンポーネントの属性を構成することです.エディタのデフォルトでは使用できません.editor/フォルダの下に属性構成コンポーネントがあります.実際には、このコンポーネントを作成するかどうかにかかわらず、このフォルダは存在します.違いは、「はい」を選択することです."の場合、webpackentryコンフィギュレーションにはeditor/index.vueファイルが含まれ、逆に含まれません.したがって、カスタム属性コンフィギュレーションコンポーネントが必要であることに気づき、これまで「はい」を選択していなかった場合は、webpack.config.jsのentryフィールドにeditor: './editor/index.vue'を追加すればよい.

コンポーネント開発

コード良コンポーネントはvueに基づいて、vueフレームワークについてある程度理解すれば、コード良コンポーネントを簡単に開発することができます.
上図では、依存をインストールしてプロジェクトを開始し、コンポーネントを簡単に変更して「hello world」を示しています.
次の図では、1枚の画像、1行の文字、画像、文字を構成できる簡単なカードコンポーネントを開発します.
現在でも一般的なvueコンポーネントのように、2つのパラメータimgとlineを受け入れています.エディタが必要なパラメータを認識し、合理的な入力コントロールを提供するにはどうすればいいのでしょうか.次に、その改造を見てみましょう.
我々は、imgパラメータおよびlineパラメータの両方にeditorフィールドを追加し、editor.typeおよびeditor.labelを指定した.

コンポーネントの構築とパブリッシュ

コンポーネント開発が完了し、1枚の美しい画像を準備してtypeをコンポーネントアイコンとして置き換え、コンポーネントreadmeを書き、labelコンポーネントバージョン番号(typeフィールド)が最新で、コンポーネント中国語名(icon.pngフィールド)が配置されているかどうかを確認し、準備が完了すれば配布することができる.
コンポーネントウェアハウスが設定されていない場合は、まず設定コマンドを実行します.

#           godspen.ymm56.com
gods-pen config registry https://godspen.ymm56.com

パブリケーションの実行(自動構築を含む)

gods-pen publish -t [access-token]

そのうちpackage.jsonコード管理バックグラウンドでユーザー設定を取得してください.
これでリリースに成功しましたので、使ってみましょう

おしゃべり

定例は体験を求め、定例はstarを求める.