Guide frontal


Introduction
Écrire du JavaScript

Écriture de composants Vue
  • Utiliser React
    • Introduction
    • Bien que Laravel ne vous oblige pas à utiliser quel préprocesseur JavaScript ou CSS, il permet d'utiliser des éléments adaptés à de nombreux scénarios d'application. Le point de départ de Bootstrap et Vue. Par défaut, Laravel utilise NPM pour installer ces deux packages frontaux.
    CSS
Laravel Mix fournit une API propre et expressive pour compiler SASS et Less, qui peut étendre le CSS d'origine, avec la possibilité d'ajouter des variables, des mixins et d'autres fonctionnalités pour améliorer l'utilisation du CSS. Dans ce document, nous décrirons brièvement le processus général de compilation pour CSS ; cependant, vous feriez mieux de consulter la documentation complète de Laravel Mix pour plus de détails sur la compilation de SASS et Less.

JavaScript

Laravel ne nécessite pas que vous utilisiez un framework ou une bibliothèque JavaScript spécifique pour créer votre application. En fait, vous pouvez le faire sans utiliser JavaScript du tout. Mais Laravel comprend plusieurs échafaudages de base qui facilitent la création de JavaScript moderne basé sur la bibliothèque Vue. Vue fournit une API hautement expressive qui utilise des composants pour créer du JavaScript robuste. Comme CSS, les composants JavaScript peuvent être facilement compilés dans un seul fichier JavaScript basé sur un navigateur à l'aide de Laravel Mix.

Supprimer l'échafaudage frontal

Pour supprimer l'échafaudage frontal de votre application, vous pouvez utiliser la commande Artisan preset. L'exécution de la commande preset avec l'option none supprimera l'échafaudage Bootstrap et Vue de l'application, ne laissant que les fichiers SASS vides et plusieurs bibliothèques d'outils JavaScript couramment utilisées : preset Artisan 命令。执行带有 none 选项的  preset 命令，将从应用中删除 Bootstrap 和 Vue 脚手架，只保留空的  SASS 文件和几个常用的 JavaScript 工具库：

php artisan preset none

编写 CSS

Laravel 的 package.json 文件包含 bootstrap 包，帮助你使用 Bootstrap 开始初始化应用的前端。但是你可以根据你自己应用的需要在  package.json 中添加或删除依赖包。不是一定要使用 Bootstrap 框架构建 Laravel 应用，它只是为想使用它的人提供了一个易用的起点。

编译 CSS 之前，请使用 Node 包管理器 (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 变量文件并加载 Bootstrap，它为多数应用提供了一个易用的起点。 可以自由的定制 app.scss

npm install

< a name="writing-css">

Écriture CSS

Le package.json Le fichier contient le package bootstrap, qui vous aide à utiliser Bootstrap pour commencer à initialiser le front-end de votre application. Mais vous pouvez ajouter ou supprimer des packages dépendants dans package.json en fonction des besoins de votre propre application. Vous n'êtes pas obligé d'utiliser le framework Bootstrap pour créer des applications Laravel, il fournit simplement un point de départ facile à utiliser pour ceux qui souhaitent l'utiliser.
Avant de compiler CSS, veuillez utiliser le Node Package Manager (NPM) pour installer les dépendances frontales du projet : 🎜
npm run dev
🎜Une fois que vous avez utilisé npm install pour installer les packages de dépendances, vous pouvez utiliser Laravel Mixez pour compiler SASS en CSS natif. . La commande npm run dev traitera les déclarations dans le fichier webpack.mix.js. Habituellement, le CSS compilé est placé dans le répertoire public/css : 🎜
Vue.component(  
  'example-component',    
  require('./components/ExampleComponent.vue')
 );
🎜Le fichier webpack.mix.js par défaut de Laravel compilera resources/sass/ app.scss Fichier SASS. app.scss importe un fichier de variables SASS et charge Bootstrap, qui fournit un point de départ facile à utiliser pour la plupart des applications. Vous êtes libre de personnaliser le fichier app.scss pour utiliser les préprocesseurs souhaités ou même complètement différents en configurant Laravel Mix. 🎜🎜🎜🎜🎜🎜🎜

Écriture de JavaScript

Tous les packages JavaScript dont dépend l'application doivent se trouver dans le fichier package.json dans le répertoire racine du projet. Ce fichier est similaire au fichier composer.json. Le fichier composer.json résout les dépendances PHP et le fichier package.json résout les dépendances JavaScript. . Utilisez le Node Package Manager (NPM) pour installer ces packages de dépendances : package.json 文件中找到。这个文件与 composer.json 文件类似， composer.json 文件解决 PHP 的依赖关系，package.json 文件则解决 JavaScript 的依赖关系。使用 Node 包管理器 (NPM) 安装这些依赖包：

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

{tip} 默认情况下， Laravel 的 package.json 文件包含 vue 、 axios 等几个包，以帮助你开始构建 JavaScript 应用。可以根据应用的需要随意添加或删除 package.json 文件中的依赖。

一旦安装了这些包，就可以使用 npm run dev 命令 编译你的资源。Webpack 现代 JavaScript 应用的模块打包器。运行 npm run dev 命令时， Webpack 将执行 webpack.mix.js 文件中的指令：

php artisan preset react

默认情况下， Laravel 的 webpack.mix.js 文件编译 SASS 和 resources/js/app.js 文件。你可以在 app.js 文件中注册组件，如果你喜欢利用其它框架配置自己的 JavaScript 应用。编译过的 JavaScript 通常放置在 public/js 目录。

{tip}  app.js 文件将载入 resources/js/bootstrap.js 文件，它负责配置和启动 Vue、 Axios、 jQuery 和其它 JavaScript 依赖。如果你想配置额外的 JavaScript 依赖，可以在这个文件内完成。

编写 Vue 组件

默认情况下，纯净的 Laravel 应用包含 ExampleComponent.vue Vue 组件，存放在 resources/js/components 目录中。 ExampleComponent.vue 文件是一个 单文件 Vue 组件 示例，在同一个文件中定义了组件的 JavaScript 和 HTML 。单文件组件提供了构建 JavaScript 驱动应用的简便方法。这个示例组件是在 app.js 文件中注册的：

rrreee

要在应用中使用该组件，需要将其放入 HTML 模板。比如，运行 make:auth Artisan 命令搭建应用的用户身份验证和注册页面的骨架，只要把这个组件放到 home.blade.php Blade 模板中：

rrreee

{tip} 切记，每次修改了 Vue 组件，都要运行 npm run dev 命令。也可以运行  npm run watchrrreee

{tip} Par défaut, le fichier package.json de Laravel contient vue, < code >axios et plusieurs autres packages pour vous aider à démarrer la création d'applications JavaScript. Vous pouvez ajouter ou supprimer des dépendances dans le fichier package.json à volonté en fonction des besoins de votre application.

Une fois ces packages installés, vous pouvez utiliser la commande npm run dev pour compiler vos ressources. Bundleur de modules Webpack pour les applications JavaScript modernes. Lorsque vous exécutez la commande npm run dev, Webpack exécutera les instructions du fichier webpack.mix.js : rrreee

Par défaut, le webpack.mix de Laravel Les fichiers .js compilent les fichiers SASS et resources/js/app.js. Vous pouvez enregistrer des composants dans le fichier app.js si vous préférez configurer votre application JavaScript à l'aide d'autres frameworks. Le JavaScript compilé est généralement placé dans le répertoire public/js.

{tip} Le fichier app.js chargera le fichier resources/js/bootstrap.js, qui est responsable de la configuration et du démarrage de Vue, Axios, jQuery et autres dépendances JavaScript. Si vous souhaitez configurer des dépendances JavaScript supplémentaires, vous pouvez le faire dans ce fichier.

🎜
🎜

Ecriture de composants Vue

🎜Par défaut, pur The Laravel L'application contient le composant Vue ExampleComponent.vue, qui est stocké dans le répertoire resources/js/components. Le fichier ExampleComponent.vue est un exemple de composant Vue à fichier unique qui définit le JavaScript et le HTML du composant dans le même fichier. Les composants à fichier unique offrent un moyen simple de créer des applications basées sur JavaScript. Cet exemple de composant est enregistré dans le fichier app.js : 🎜rrreee🎜Pour utiliser ce composant dans votre application, vous devez le mettre dans un modèle HTML. Par exemple, pour exécuter la commande make:auth Artisan afin de créer le squelette de la page d'authentification et d'enregistrement des utilisateurs de votre application, placez simplement ce composant dans le blade home.blade.php template : 🎜 rrreee
🎜{tip} N'oubliez pas que chaque fois que vous modifiez un composant Vue, vous devez exécuter la commande npm run dev. Vous pouvez également exécuter la commande npm run watch pour surveiller et recompiler automatiquement les composants modifiés. 🎜🎜🎜Si vous souhaitez apprendre davantage à écrire des composants Vue, vous pouvez lire la 🎜Documentation Vue🎜, qui fournit un aperçu complet et facile à lire de l'ensemble du framework Vue. 🎜🎜🎜🎜🎜🎜🎜

Utilisation de React

Si vous préférez utiliser React pour créer des applications JavaScript, Laravel facilite le basculement entre l'échafaudage Vue et l'échafaudage React. Dans une application purement Laravel, cela peut être réalisé à l'aide de la commande react 参数的 preset :

rrreee

Cette commande supprimera l'échafaudage Vue et le remplacera par l'échafaudage React, comprenant également un exemple de composant.

←
→