PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > laravel8+vue2单页面应用

laravel8+vue2单页面应用

邯郸易住宋至刚
邯郸易住宋至刚 原创
2021年03月04日 07:05:23 1302浏览

一、环境配置

此文默认composer为全局安装(可察看相关文章,保证composer为全局安装)

1、创建laravel项目

如果已有项目,也可以使用,简单方法可以直接将laravel8文件夹中的文件直接复制到项目目录下。
如果没有项目,
使用artisan命令创建项目:

  1. composer create-project laravel/laravel demo

其中的“demo”是自己项目的名称,可以是“lv8vue2”、“blog”、“spa”等等。

2、引入laravel/ui

这里需要注意的是,引入laravel/ui是指项目引入,因此一定要切换到项目根目录

(1)切换到根目录

  1. cd */*/demo

(2)引入laravel/ui

  1. composer require laravel/ui

3、初始化vue

这里需要注意的是有的文章并没有交待清楚laravel8与vue2的关系,讲到vue-loader等问题时让人误认为需要安装vue-loader,可是自己安装的vue-loader与laravel8自带的vue出现兼容问题,总是会出些莫名其妙的错误,所以不用重新安装vue及相关组件,在使用vue及相关组件时只需要初始化就可以了

  1. php artisan ui vue

vue初始化完成以后,项目根目录下的package.json中devDependencies内容会增加vue及相关组件

  1. "vue-loader": "^15.9.6",
  2. "vue-router": "^3.5.1",
  3. "vue-template-compiler": "^2.6.10"

安装完成后,Vue组件和JS文件在resources/js目录下;

4、入口文件resources/js/app.js文件改造

当然,laravel8是自动生成的,无需自己动手改造。

  1. require('./bootstrap');
  2. window.Vue = require('vue');
  3. // 注册组件
  4. Vue.component('example-component', require('./components/ExampleComponent.vue').default);
  5. // 挂载实例
  6. const app = new Vue({
  7. el: '#app',
  8. });

5、编写一个vue组件并注册

(1)在resources/js/components目录下创建DemoComponent.vue组件

  1. <template>
  2. <div class="container">
  3. <div class="jumbotron">
  4. 这里是我的第一个laravel+vue单页
  5. </div>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. // 导出组件
  11. name:'DemoComponent'
  12. }
  13. </script>
  14. <style scoped>
  15. </style>

(2)在入口文件resources/js/app.js中注册组件

此时的app.js应该是这样的:
require(‘./bootstrap’);

  1. window.Vue = require('vue');
  2. // 注册组件
  3. //Vue.component('example-component', require('./components/ExampleComponent.vue').default);
  4. Vue.component('demo-component', require('./components/DemoComponent.vue').default);
  5. // 挂载实例
  6. const app = new Vue({
  7. el: '#app',
  8. });

6、改造laravel8自带的欢迎页面视图welcome.blade.php

  1. `<!DOCTYPE html>
  2. <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Laravel</title>
  7. <!--1、 引入支持 Bootstrap 的 CSS 样式文件 -->
  8. <link href="{{ asset('css/app.css') }}" rel="stylesheet">
  9. </head>
  10. <body>
  11. <div id="app">
  12. <div>
  13. <!-- 3、使用组件 -->
  14. <demo-component></demo-component>
  15. </div>
  16. </div>
  17. <!-- 2、引入支持Vue框架和Vue组件的app.js文件 -->
  18. <script src="{{ asset('js/app.js') }}"></script>
  19. </body>
  20. </html>`

7、在routes/web.php中定义一个万能路由:

Route::get(‘/{any}’, [SpaController::class,’index’])->where(‘any’, ‘.*’);

8、安装依赖

  1. npm install

9、测试代码

  1. npm run dev

原来的欢迎视图改造后如下:

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议