Panduan Frontend
Pengenalan
Write JavaScript
Laravel Mix menyediakan API yang bersih dan ekspresif untuk menyusun SASS dan Less, yang boleh memanjangkan CSS asal, dengan keupayaan untuk menambah pembolehubah, campuran dan ciri lain untuk menjadikan CSS lebih baik untuk digunakan. Dalam dokumen ini, kami akan menerangkan secara ringkas proses penyusunan umum untuk CSS, bagaimanapun, anda lebih baik menyemak dokumentasi Laravel Mix penuh untuk mendapatkan butiran tentang menyusun SASS dan Less.
JavaScript
Laravel tidak memerlukan anda menggunakan rangka kerja atau pustaka JavaScript khusus untuk membina apl anda. Malah, anda boleh melakukannya tanpa menggunakan JavaScript sama sekali. Tetapi Laravel menyertakan beberapa perancah asas yang memudahkan untuk mencipta JavaScript moden berdasarkan perpustakaan Vue. Vue menyediakan API yang sangat ekspresif yang menggunakan komponen untuk membina JavaScript yang mantap. Seperti CSS, komponen JavaScript boleh disusun dengan mudah menjadi satu fail JavaScript berasaskan pelayar menggunakan Laravel Mix.
Padamkan perancah bahagian hadapan
Untuk memadamkan perancah bahagian hadapan daripada aplikasi anda, anda boleh menggunakan perintah preset
Artisan. Melaksanakan perintah preset
dengan pilihan none
akan mengalih keluar perancah Bootstrap dan Vue daripada aplikasi, meninggalkan hanya fail SASS kosong dan beberapa pustaka alat JavaScript yang biasa digunakan: 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">
Semua pakej JavaScript yang bergantung pada aplikasi mesti ditemui dalam fail {tip} 默认情况下, Laravel 的 一旦安装了这些包,就可以使用 默认情况下, Laravel 的 {tip} 默认情况下,纯净的 Laravel 应用包含 要在应用中使用该组件,需要将其放入 HTML 模板。比如,运行 {tip} 切记,每次修改了 Vue 组件,都要运行 Jika anda lebih suka menggunakan React untuk membina aplikasi JavaScript, Laravel menjadikannya sangat mudah untuk bertukar antara perancah Vue dan perancah React. Dalam aplikasi Laravel tulen, ini boleh dicapai menggunakan perintah Perintah ini akan mengalih keluar perancah Vue dan menggantikannya dengan perancah React, juga termasuk komponen contoh. Menulis CSS
Laravel's package.json
Fail mengandungi pakej bootstrap
, yang membantu anda menggunakan Bootstrap untuk mula memulakan bahagian hadapan aplikasi anda. Tetapi anda boleh menambah atau memadam pakej bergantung dalam package.json
mengikut keperluan aplikasi anda sendiri. Anda tidak perlu menggunakan rangka kerja Bootstrap untuk membina aplikasi Laravel, ia hanya menyediakan titik permulaan yang mudah digunakan untuk mereka yang ingin menggunakannya. Sebelum menyusun CSS, sila gunakan Pengurus Pakej Node (NPM) untuk memasang kebergantungan bahagian hadapan projek: 🎜npm run dev
🎜Setelah anda menggunakan npm install
untuk memasang pakej dependensi, anda boleh menggunakan Laravel Campurkan untuk menyusun SASS ke dalam CSS asli. . Perintah npm run dev
akan memproses pengisytiharan dalam fail webpack.mix.js
. Biasanya CSS yang disusun diletakkan dalam direktori public/css
: 🎜Vue.component(
'example-component',
require('./components/ExampleComponent.vue')
);
🎜Fail lalai webpack.mix.js
Laravel akan menyusun resources/sass/ app.scss
Fail SASS. app.scss
mengimport fail pembolehubah SASS dan memuatkan Bootstrap, yang menyediakan titik permulaan yang mudah digunakan untuk kebanyakan aplikasi. Anda bebas untuk menyesuaikan fail app.scss
untuk menggunakan prapemproses yang anda inginkan atau malah berbeza sama sekali dengan mengkonfigurasi Laravel Mix. 🎜🎜🎜🎜🎜🎜🎜Menulis JavaScript
package.json
dalam direktori akar projek. Fail ini serupa dengan fail composer.json
Fail composer.json
menyelesaikan kebergantungan PHP dan fail package.json
menyelesaikan kebergantungan JavaScript. . Gunakan Pengurus Pakej Node (NPM) untuk memasang pakej pergantungan ini: package.json
文件中找到。这个文件与 composer.json
文件类似, composer.json
文件解决 PHP 的依赖关系,package.json
文件则解决 JavaScript 的依赖关系。使用 Node 包管理器 (NPM) 安装这些依赖包:@extends('layouts.app')
@section('content')
<example-component></example-component>
@endsection
package.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 watch
rrreee{tip} Secara lalai, fail
Secara lalai, Laravel's package.json
Laravel mengandungi vue
, < code >axios dan beberapa pakej lain untuk membantu anda mula membina aplikasi JavaScript. Anda boleh menambah atau mengalih keluar kebergantungan dalam fail package.json
sesuka hati mengikut keperluan aplikasi anda. webpack.mix . fail js
menyusun fail SASS dan resources/js/app.js
. Anda boleh mendaftarkan komponen dalam fail app.js
jika anda lebih suka mengkonfigurasi aplikasi JavaScript anda menggunakan rangka kerja lain. JavaScript yang disusun biasanya diletakkan dalam direktori public/js
. {tip} Fail
app.js
akan memuatkan fail resources/js/bootstrap.js
, yang bertanggungjawab untuk mengkonfigurasi dan memulakan Vue, Axios, jQuery dan kebergantungan JavaScript lain. Jika anda ingin mengkonfigurasi kebergantungan JavaScript tambahan, anda boleh melakukannya dalam fail ini. 🎜Menulis komponen Vue
🎜Secara lalai, The Laravel tulen aplikasi mengandungi ExampleComponent.vue
komponen Vue, yang disimpan dalam direktori resources/js/components
. Fail ExampleComponent.vue
ialah contoh komponen Vue satu fail yang mentakrifkan JavaScript dan HTML komponen dalam fail yang sama. Komponen fail tunggal menyediakan cara mudah untuk membina aplikasi dipacu JavaScript. Komponen contoh ini didaftarkan dalam fail app.js
: 🎜rrreee🎜Untuk menggunakan komponen ini dalam apl anda, anda perlu memasukkannya ke dalam templat HTML. Contohnya, untuk menjalankan perintah make:auth
Artisan untuk membina rangka halaman pengesahan dan pendaftaran pengguna aplikasi anda, hanya masukkan komponen ini ke dalam home.blade.php
Blade templat: 🎜 rrreee🎜{tip} Ingat, setiap kali anda mengubah suai komponen Vue, anda mesti menjalankan perintah
npm run dev
. Anda juga boleh menjalankan perintah npm run watch
untuk memantau dan menyusun semula komponen yang diubah secara automatik. 🎜🎜🎜Jika anda berminat untuk belajar lebih lanjut menulis komponen Vue, anda boleh membaca 🎜dokumentasi Vue🎜, yang menyediakan gambaran keseluruhan yang komprehensif dan mudah dibaca bagi keseluruhan rangka kerja Vue. 🎜🎜🎜🎜🎜🎜🎜Menggunakan React
react
参数的 preset
: