首页分享 Laravel学习笔记基础系列

Laravel学习笔记基础系列

来源：花匠小妙招时间：2025-07-04 18:58

作者：温新

时间：2021-07-04

hi，我是温新，一名PHPer

如果想使用vue、react、bootstrap等该怎么办？Laravel6开始，对这些资源进行了扩展封装。如登录系统在Laravel8.x中已经被移除且打包到了laravel/ui包中。

我们要使用这些功能就必须安装laravel/ui包。这里将以Vue为案例作为演示。

Bootstrap样式的使用

第一步：安装laravel/ui

composer require laravel/ui

第二步：使用vue与bootstrap

安装之前请先打开package.json文件看看，是没有如下这两个包的。

php artisan ui bootstrap php artisan ui vue

vue安装完后，resources/js/app.js会生成对应的文件。

第二步：安装

npm install

若出现一些警告，可以忽略

第三步：运行

npm run dev

运行之后就可以直接使用bootstrap样式了。

第四步：使用bootstrap样式

// test.blade.php <link rel="stylesheet" href="css/app.css"> <div> <h1>自如初</h1> <button class="btn btn-success">成功</button> </div>

bootstrap样式使用成功后，那么接下来使用vue

Vue的使用

关于vue的使用，前面三个步骤是一样的，因此我们第四步开始。

第四步：编写Vue组件

文件：resources/js/components/DemoComponent.vue

<template> <div class="jumbotron"> <h1>自如初博客</h1> </div> </template> <script> export default { name: "DemoComponent" } </script> <style scoped> </style>

第五步：app.js中注册组件

文件：resources/js/app.js

Vue.component('demo-component', require('./components/DemoComponent.vue').default);

第六步：前端页面使用

文件：resources/views/test.blade.php

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>  <link rel="stylesheet" href="css/app.css"> </head> <body> <div id="app"> <div> <demo-component></demo-component> </div> </div>  <script src="{{ asset('js/app.js') }}"></script> </body> </html>

第七步：重新编译

npm run dev

关于Laravel中前端的使用到这里就结束了。这不仅仅是一个结束，而一个全新的开始。关于前端的使用，还有很多可以去发掘，奔跑吧，PHPer。

我是温新

每天进步一点点，就一点点