Laravel学习笔记基础系列--(三十三)Laravel前端开发-脚手架的使用

作者: 温新

分类: 【Laravel】

阅读: 1764

时间: 2021-08-02 14:43:48

作者：温新

时间：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>
    <!--使用bootstrap样式-->
    <link rel="stylesheet" href="css/app.css">
</head>
<body>
    <div id="app">
        <div>
    			<!--使用vue组件-->
            <demo-component></demo-component>
        </div>
    </div>
	 <!--引入支持Vue框架和Vue组件的app.js文件-->
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

第七步：重新编译

npm run dev

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

我是温新

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

请登录后再评论