オープンWebコンポーネントの簡単なガイド

コンポーネントのフレームワークにはあまり経験がありませんが、Webコンポーネントは、コンポーネントベースのWebサイトを開発するオープン方法として際立っています.OWCはフレームワークの任意の種類に接続されていないため、それはあなたが取り組んでいるすべてのプロジェクト上でピックアップをはるかに簡単になり、それは完全に独立することができます.私はOWCを使用する方法を披露するので、あなたのウェブサイトにさまざまなコンポーネントを追加を開始することができます.

nodejsをインストールする

ダウンロードしてnodejsをインストールして起動する必要がありますhttps://nodejs.org/en/ . 私はLTSバージョンをダウンロードすることを勧めます.

あなたのOWC Repoを初期化してください

ノードをインストールしたら、コマンドラインに移動して実行します.npm init @open-wcこれは、コンポーネントかアプリケーションを作成するかどうかを一連の質問をするプロンプトが表示されます.あなたが選択する場合は、リンク、テスト、およびストーリーブックを追加することもできますが、それは必要ありません.最後に、プロジェクトに名前を付け、依存関係をインストールしてからcd <project-name>

3 .ファイル構造に慣れる

コンポーネントディレクトリに入ったら、VSコードを使用しているならcode . VSコードでプロジェクトを開きます.あなたは役に立つファイルのカップルを見つけるでしょう.最初にチェックアウトdemo\index.html . これにより、プロジェクトを起動するときに実行されるHTMLが表示されます.第二に、あなたが見つけるsrc\<project-name>.js . これは、コンポーネントを構築し、使用するコンポーネントをインポートする場所です.

コンポーネントのインストール

プロジェクトを始める前に、デモに追加したいコンポーネントをダウンロードする必要があります.また、あなたがから使用する任意のを選択することができますhttps://www.npmjs.com/ . プロジェクトディレクトリでnpm install @lrnwebcomponents/meme-maker and npm install @lrnwebcomponents/moar-sarcasm . それから、あなたが加える必要がある我々のプロジェクトにこれらの構成要素を輸入するために

import '@lrnwebcomponents/meme-maker';
import '@lrnwebcomponents/moar-sarcasm';

あなたのトップへsrc\<project-name>.js ファイル.

5プロジェクトを開始する

あなたがする必要があるすべてを実行するには、プロジェクトディレクトリに移動し、実行することですnpm start . これはあなたのプロジェクトを自動的にブラウザで開きます.また、ファイルの変更を保存するたびに自動的に更新されます.

コンポーネントの使用を開始する

インポートしたコンポーネントによって、あなたのsrc\<project-name>.js ファイル.我々がダウンロードした例では、このコードをrender() 関数.

<meme-maker
  image-url="https://i.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg"
  top-text="Maybe I Should Buy"
  bottom-text="More Doge Coin">
</meme-maker>
<moar-sarcasm>
  "maybe i should buy more doge coin"
</moar-sarcasm>

ファイルを保存したら、ページは次のようになります.

そして、あなたは完了です!
これはオープンWebコンポーネントへの簡単な導入ですが、私はそれが独立してオープンソースのreactjsやvuejsのようなJSフレームワークを使用するよりも好きです.また、簡単なプロジェクトの実行を取得することができますし、他のコンポーネントを一緒にミックスして一致するインストールします.最後に、OWCがあなたのdevプロジェクトの他のすべてで動作する方法について心配する必要はありません.
閉じるこの動画はお気に入りから削除されています.