프런트엔드 가이드
소개
JavaScript
Laravel에서는 앱을 빌드하기 위해 특정 JavaScript 프레임워크나 라이브러리를 사용할 것을 요구하지 않습니다. 실제로 JavaScript를 전혀 사용하지 않고도 이를 수행할 수 있습니다. 그러나 Laravel에는 Vue 라이브러리를 기반으로 최신 JavaScript를 보다 쉽게 생성할 수 있는 몇 가지 기본 스캐폴딩이 포함되어 있습니다. Vue는 구성 요소를 사용하여 강력한 JavaScript를 구축하는 표현력이 뛰어난 API를 제공합니다. CSS와 마찬가지로 JavaScript 구성 요소는 Laravel Mix를 사용하여 단일 브라우저 기반 JavaScript 파일로 쉽게 컴파일될 수 있습니다.
프런트 엔드 스캐폴딩 삭제
애플리케이션에서 프런트 엔드 스캐폴딩을 삭제하려면 preset Artisan 명령을 사용할 수 있습니다. none 옵션과 함께 preset 명령을 실행하면 애플리케이션에서 Bootstrap 및 Vue 스캐폴딩이 제거되고 빈 SASS 파일과 일반적으로 사용되는 여러 JavaScript 도구 라이브러리만 남게 됩니다. 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">
애플리케이션이 의존하는 모든 JavaScript 패키지는 프로젝트 루트 디렉터리의 {tip} 默认情况下， Laravel 的 一旦安装了这些包，就可以使用 默认情况下， Laravel 的 {tip} 默认情况下，纯净的 Laravel 应用包含 要在应用中使用该组件，需要将其放入 HTML 模板。比如，运行 {tip} 切记，每次修改了 Vue 组件，都要运行 React를 사용하여 JavaScript 애플리케이션을 구축하려는 경우 Laravel을 사용하면 Vue 스캐폴딩과 React 스캐폴딩 사이를 매우 쉽게 전환할 수 있습니다. 순수 Laravel 애플리케이션에서는 이 명령은 Vue 스캐폴딩을 제거하고 예제 구성 요소를 포함하는 React 스캐폴딩으로 대체합니다. CSS 작성
Laravel의 package.json 파일 Bootstrap을 사용하여 애플리케이션의 프런트 엔드 초기화를 시작하는 데 도움이 되는 bootstrap 패키지가 포함되어 있습니다. 하지만 자신의 애플리케이션 필요에 따라 package.json에서 종속 패키지를 추가하거나 삭제할 수 있습니다. Laravel 애플리케이션을 구축하기 위해 Bootstrap 프레임워크를 사용할 필요는 없으며, 단지 이를 사용하려는 사람들에게 사용하기 쉬운 시작점을 제공할 뿐입니다. CSS를 컴파일하기 전에 NPM(노드 패키지 관리자)을 사용하여 프로젝트 프런트엔드 종속성을 설치하세요. 🎜npm run dev
🎜 npm install을 사용하여 종속성 패키지를 설치한 후에는 Laravel을 사용할 수 있습니다. SASS를 기본 CSS로 컴파일하려면 혼합하세요. npm run dev 명령은 webpack.mix.js 파일의 선언을 처리합니다. 일반적으로 컴파일된 CSS는 public/css 디렉터리에 있습니다. 🎜Vue.component(
'example-component',
require('./components/ExampleComponent.vue')
);🎜Laravel의 기본 webpack.mix.js 파일은 resources/sass/ app.scss를 컴파일합니다. SASS 파일. app.scss는 SASS 변수 파일을 가져오고 대부분의 애플리케이션에 사용하기 쉬운 시작점을 제공하는 Bootstrap을 로드합니다. 원하는 전처리기 또는 완전히 다른 전처리기를 사용하도록 Laravel Mix를 구성하기 위해 app.scss 파일을 자유롭게 사용자 정의할 수 있습니다. 🎜🎜🎜🎜🎜🎜🎜JavaScript 작성
package.json 파일에서 찾아야 합니다. 이 파일은 composer.json 파일과 유사합니다. composer.json 파일은 PHP 종속성을 해결하고, package.json 파일은 JavaScript 종속성을 해결합니다. . NPM(노드 패키지 관리자)을 사용하여 다음 종속성 패키지를 설치하세요: package.json 文件中找到。这个文件与 composer.json 文件类似， composer.json 文件解决 PHP 的依赖关系，package.json 文件则解决 JavaScript 的依赖关系。使用 Node 包管理器 (NPM) 安装这些依赖包：@extends('layouts.app')
@section('content')
<example-component></example-component>
@endsectionpackage.json 文件包含 vue 、 axios 等几个包，以帮助你开始构建 JavaScript 应用。可以根据应用的需要随意添加或删除 package.json 文件中的依赖。npm run dev 命令 编译你的资源。Webpack 现代 JavaScript 应用的模块打包器。运行 npm run dev 命令时， Webpack 将执行 webpack.mix.js 文件中的指令：php artisan preset react
webpack.mix.js 文件编译 SASS 和 resources/js/app.js 文件。你可以在 app.js 文件中注册组件，如果你喜欢利用其它框架配置自己的 JavaScript 应用。编译过的 JavaScript 通常放置在 public/js 目录。app.js 文件将载入 resources/js/bootstrap.js 文件，它负责配置和启动 Vue、 Axios、 jQuery 和其它 JavaScript 依赖。如果你想配置额外的 JavaScript 依赖，可以在这个文件内完成。编写 Vue 组件
ExampleComponent.vue Vue 组件，存放在 resources/js/components 目录中。 ExampleComponent.vue 文件是一个 单文件 Vue 组件 示例，在同一个文件中定义了组件的 JavaScript 和 HTML 。单文件组件提供了构建 JavaScript 驱动应用的简便方法。这个示例组件是在 app.js 文件中注册的：make:auth Artisan 命令搭建应用的用户身份验证和注册页面的骨架，只要把这个组件放到 home.blade.php Blade 模板中：npm run dev 命令。也可以运行 npm run watchrrreee{tip} 기본적으로 Laravel의
기본적으로 Laravel의 package.json 파일에는 vue, < code가 포함되어 있습니다. >axios 및 기타 여러 패키지를 사용하여 JavaScript 애플리케이션 구축을 시작하는 데 도움을 받을 수 있습니다. 애플리케이션의 필요에 따라 package.json 파일에서 종속성을 마음대로 추가하거나 제거할 수 있습니다. webpack.mix .js 파일은 SASS 및 resources/js/app.js 파일을 컴파일합니다. 다른 프레임워크를 사용하여 JavaScript 애플리케이션을 구성하려는 경우 app.js 파일에 구성 요소를 등록할 수 있습니다. 컴파일된 JavaScript는 일반적으로 public/js 디렉토리에 배치됩니다. {tip}
app.js 파일은 Vue, Axios, jQuery 및 기타 JavaScript 종속성. 추가 JavaScript 종속성을 구성하려면 이 파일 내에서 구성할 수 있습니다. 🎜Vue 구성 요소 작성
🎜기본적으로 순수 The Laravel 애플리케이션에는 resources/js/comComponents 디렉터리에 저장되는 ExampleComponent.vue Vue 구성 요소가 포함되어 있습니다. ExampleComponent.vue 파일은 동일한 파일에서 구성 요소의 JavaScript와 HTML을 정의하는 단일 파일 Vue 구성 요소의 예입니다. 단일 파일 구성 요소는 JavaScript 기반 애플리케이션을 구축하는 쉬운 방법을 제공합니다. 이 예제 구성 요소는 app.js 파일에 등록되어 있습니다. 🎜rrreee🎜 이 구성 요소를 앱에서 사용하려면 HTML 템플릿에 넣어야 합니다. 예를 들어, make:auth Artisan 명령을 실행하여 애플리케이션의 사용자 인증 및 등록 페이지의 뼈대를 구축하려면 이 구성 요소를 home.blade.php 블레이드에 넣으면 됩니다. 템플릿: 🎜 rrreee🎜{tip} Vue 구성 요소를 수정할 때마다
npm run dev 명령을 실행해야 한다는 점을 기억하세요. npm run watch 명령을 실행하여 변경된 구성 요소를 모니터링하고 자동으로 다시 컴파일할 수도 있습니다. 🎜🎜🎜Vue 구성 요소 작성에 대한 추가 학습에 관심이 있다면 전체 Vue 프레임워크에 대한 포괄적이고 읽기 쉬운 개요를 제공하는 🎜Vue 설명서🎜를 읽어보세요. 🎜🎜🎜🎜🎜🎜🎜React 사용하기
react 参数的 preset 명령을 사용하여 이를 수행할 수 있습니다:
