ホームページ >ウェブフロントエンド >ライユイのチュートリアル >レイウイ背景フレームワークの構築の詳細な説明
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 をクリックすると、次の効果が表示されます。
列にご注目ください。
以上がレイウイ背景フレームワークの構築の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。