レイウイ背景フレームワークの構築の詳細な説明

layui (同音異義語: UI ライク) は、独自のモジュール仕様を使用して記述されたフロントエンド UI フレームワークであり、ネイティブ HTML/CSS/JS の記述および構成形式に従っています。閾値は非常に低く、すぐに使用できます。外観はミニマルですが、内部は充実しています。サイズは軽く、コンポーネントが豊富です。コア コードから API に至るすべての詳細が注意深く作成されており、迅速なインターフェイス開発に非常に適しています。

layui の最初のバージョンは、2016 年の黄金の秋にリリースされました。これは、MVVM の最下位層に基づいた UI フレームワークとは異なりますが、方向性に反するものではなく、自然に戻ることを信じています。 。正確に言うと、サーバーサイド プログラマ向けにカスタマイズされたものです。さまざまなフロントエンド ツールの複雑な構成に関与する必要はありません。ブラウザ自体、およびすべての要素と対話に直面するだけで済みます。必要なものがすぐに見つかります。

1. 公式 Web サイトからlayui をダウンロードします (任意のドライブ文字に保存できます)

ダウンロードが完了すると、次の構造が表示されます

├─css //css目录
│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件

2. Git リポジトリからlayuiをダウンロードします 二次開発を促進するための完全な開発パッケージ

ダウンロード アドレス: https://github.com/sentsin/layui/

3. npm インストール (前提条件はノードをインストールすることです)最初に .js -----この操作については、node.js のインストールについては次のセクションを参照してください)

一般的に WebPack 管理に使用されます

4. その後上記の操作が完了したら、新しいAプロジェクトを作成します（ここではMVCを例にします）

#そして、ダウンロードしたlayui（ファイル名などの情報は完全に変更しないでください）

#をプロジェクトに移動します

##5.layui がデプロイされたので、効果を表示するための新しいページを作成できます。

MVC で新しいレイアウト ページを作成します (一部のコンテンツ)フレーム内は同じなので再利用できるので、新規レイアウトページを作成します。マスターページやユーザーコントロール等は他のプロジェクトで新規作成することも可能です)

アドレス: http://www .layui.com/demo/admin.html 背景レイアウトを書き込みます

選択してレイアウト コードを取得し、そのコードをレイアウト ページに貼り付けます。

新しいレイアウト ページとビュー ページを作成します。レイアウト ページのメイン コンテンツ領域に @RenderBody() メソッドを追加します。これは他のプロジェクトには当てはまりません。次のように

ビューを追加します--

ビューを実行すると、次の効果が得られます

##レイアウト ページにリストを表示するためのジャンプ リンクを追加します- -

新しい FormTable ビューを作成し (レイアウト ページを追加する必要があることに注意してください)、他の要素を追加します。フォーム要素はここに追加されます。アドレス: http://www .layui.com/demo/form.html で、[コードの表示] を選択し、必要なコードをページに貼り付けます --

index.cshtml ページを実行した後、リスト 1 をクリックすると、次の効果が表示されます。

#layui の詳細については、#layui 使用法チュートリアル

列にご注目ください。

以上がレイウイ背景フレームワークの構築の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。