フロントエンドガイド


JavaScriptの書き方

    Vue コンポーネントの作成
    • React の使用
    • ##はじめに
    • Laravel は、JavaScript または CSS プリプロセッサの使用を強制しませんが、多くのアプリケーション シナリオに適した Bootstrap と Vue を使用するための開始点を提供します。デフォルトでは、Laravel は NPM を使用してこれら 2 つのフロントエンド パッケージをインストールします。
    CSS
Laravel Mix は、SASS および Less をコンパイルするためのクリーンで表現力豊かな API を提供します。これは、元の CSS を拡張でき、変数、ミックスイン、 CSS をより使いやすくするその他の強力な機能。このドキュメントでは、CSS の一般的なコンパイル プロセスについて簡単に説明しますが、SASS および Less のコンパイルの詳細については、Laravel Mix ドキュメント全体を確認することをお勧めします。

JavaScript

Laravel では、アプリケーションを構築するために特定の JavaScript フレームワークやライブラリを使用する必要はありません。実際、JavaScript をまったく使用しなくても実行できます。ただし、Laravel には、Vue ライブラリに基づいて最新の JavaScript を簡単に作成できるようにするいくつかの基本的なスキャフォールディングが含まれています。 Vue は、コンポーネントを使用して堅牢な JavaScript を構築する、表現力の高い API を提供します。 CSS と同様に、JavaScript コンポーネントは、Laravel Mix を使用して単一のブラウザベースの JavaScript ファイルに簡単にコンパイルできます。

フロントエンド スキャフォールディングの削除

フロントエンド スキャフォールディングをアプリケーションから削除するには、preset Artisan コマンドを使用します。 none オプションを指定して preset コマンドを実行すると、アプリケーションから Bootstrap と Vue スキャフォールディングが削除され、空の SASS ファイルと一般的に使用されるいくつかの JavaScript ツール ライブラリのみが残ります: 

php artisan preset none

CSS の記述

Laravel の package.json ファイルには、役立つように bootstrap パッケージが含まれています。ブートストラップを使用してアプリケーションのフロントエンドの初期化を開始します。ただし、独自のアプリケーションのニーズに応じて、package.json で依存パッケージを追加または削除できます。 Laravel アプリケーションを構築するために Bootstrap フレームワークを使用する必要はありません。Bootstrap フレームワークは、それを使用したい人に使いやすい開始点を提供するだけです。

CSS をコンパイルする前に、ノード パッケージ マネージャー (NPM) を使用してプロジェクトのフロントエンド依存関係をインストールしてください: 

npm install

npm install## を使用して依存関係パッケージがインストールされたら、 #、Laravel Mix を使用すると、SASS をネイティブ CSS にコンパイルできます。 npm run dev コマンドは、webpack.mix.js ファイル内の宣言を処理します。通常、コンパイルされた CSS は public/css ディレクトリに配置されます。 

npm run dev

Laravel のデフォルトの

webpack.mix.js ファイルがコンパイルされます resources/sass/ app.scss SASS ファイル。 app.scss SASS 変数ファイルをインポートし、ブートストラップをロードします。ブートストラップは、ほとんどのアプリケーションに使いやすい開始点を提供します。 app.scss ファイルを自由にカスタマイズして、必要なプリプロセッサを使用したり、Laravel Mix を構成することでまったく異なるプリプロセッサを使用したりすることができます。

JavaScript の記述

アプリケーションが依存するすべての JavaScript パッケージは、プロジェクトのルート ディレクトリの package.json ファイルに存在する必要があります。このファイルは、composer.json ファイルに似ています。composer.json ファイルは PHP の依存関係を解決し、package.json ファイルは JavaScript の依存関係を解決します。ノード パッケージ マネージャー (NPM) を使用して、これらの依存関係パッケージをインストールします。 

npm install

{tip} デフォルトでは、Laravel の package.json ファイルには vue 、 # が含まれています。 ##axios と、JavaScript アプリケーションの構築を開始するのに役立つその他のいくつかのパッケージ。アプリケーションのニーズに応じて、package.json ファイル内の依存関係を自由に追加または削除できます。

これらのパッケージをインストールしたら、

npm run dev コマンドを使用してリソースをコンパイルできます。最新の JavaScript アプリケーション用の Webpack モジュール バンドラー。 npm run dev コマンドを実行すると、Webpack は webpack.mix.js ファイル内の命令を実行します: 

npm run dev

デフォルトでは、Laravel の

webpack mix.js ファイルは、SASS ファイルと resources/js/app.js ファイルをコンパイルします。他のフレームワークを使用して JavaScript アプリケーションを構成したい場合は、app.js ファイルにコンポーネントを登録できます。コンパイルされた JavaScript は通常、public/js ディレクトリに配置されます。

{ヒント}

app.js このファイルは、Vue の構成と起動を担当する resources/js/bootstrap.js ファイルを読み込みます。 Axios、jQuery、その他の JavaScript 依存関係。追加の JavaScript 依存関係を構成する場合は、このファイル内で行うことができます。

Vue コンポーネントの作成

デフォルトでは、純粋な Laravel アプリケーションには

ExampleComponent.vue# が含まれています。 ## Vue コンポーネントは resources/js/components ディレクトリに保存されます。 ExampleComponent.vue ファイルは、同じファイル内でコンポーネントの JavaScript と HTML を定義する単一ファイルの Vue コンポーネントの例です。単一ファイル コンポーネントを使用すると、JavaScript 駆動のアプリケーションを簡単に構築できます。このサンプル コンポーネントは app.js ファイルに登録されています: 

Vue.component(  
  'example-component',    
  require('./components/ExampleComponent.vue')
 );
このコンポーネントをアプリで使用するには、それを HTML テンプレートに入れる必要があります。たとえば、

make:auth

Artisan コマンドを実行してアプリケーションのユーザー認証および登録ページのスケルトンを構築するには、このコンポーネントを home.blade.php Blade テンプレートに配置するだけです。 

@extends('layouts.app')
@section('content')  
  <example-component></example-component>
 @endsection

{tip} Vue コンポーネントを変更するたびに、
npm run dev

コマンドを実行する必要があることに注意してください。 npm run watch コマンドを実行して、変更されたコンポーネントを監視し、自動的に再コンパイルすることもできます。

Vue コンポーネントの作成方法をさらに学習したい場合は、
Vue ドキュメント

を参照してください。このドキュメントには、Vue フレームワーク全体の包括的で読みやすい概要が記載されています。 。

React の使用

React を使用して JavaScript アプリケーションを構築したい場合、Laravel を使用すると、Vue スキャフォールディングと React スキャフォールディングを非常に簡単に切り替えることができます。純粋な Laravel アプリケーションでは、react パラメーターを指定した preset コマンドを使用してこれを実現できます。 

php artisan preset react

このコマンドは、Vue スキャフォールディングを削除し、React Scaffolding の置き換えを使用します。これにはサンプル コンポーネントも含まれています。

この記事は、LearnKu.com Web サイトで初めて公開されました。
←
→