php artisan preset none

npm install

npm run dev

npm install

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

Semua pakej JavaScript yang bergantung pada aplikasi mesti ditemui dalam fail 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

{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} Secara lalai, fail 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.

Setelah pakej ini dipasang, anda boleh menggunakan perintah npm run dev untuk menyusun sumber anda. Pengikat Modul Webpack untuk aplikasi JavaScript moden. Apabila anda menjalankan perintah npm run dev, Webpack akan melaksanakan arahan dalam fail webpack.mix.js: rrreee

Secara lalai, Laravel's 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

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 react 参数的 preset:

rrreee

Perintah ini akan mengalih keluar perancah Vue dan menggantikannya dengan perancah React, juga termasuk komponen contoh.

Artikel ini pertama kali diterbitkan di laman web LearnKu.com.