Laravel8中使用vue
2674
本篇文章给大家带来了Laravel8中使用vue的相关知识,感兴趣的朋友,下面一起来看一下,希望对大家有帮助。
安装Laravel8
composer create-project --prefer-dist laravel/laravel la8vue
引入laravel/ui
cd la8vue composer require laravel/ui
初始化Bootstarp与Vue
php artisan ui bootstrap php artisan ui vue
安装Vue前后对比
路径为 根目录下的package.json文件
安装前
"devDependencies": { "axios": "^0.19", "cross-env": "^7.0", "laravel-mix": "^5.0.1", "lodash": "^4.17.19", "resolve-url-loader": "^3.1.0" }
安装后
"devDependencies": { "axios": "^0.19", "bootstrap": "^4.0.0", "cross-env": "^7.0", "jquery": "^3.2", "laravel-mix": "^5.0.1", "lodash": "^4.17.19", "popper.js": "^1.12", "resolve-url-loader": "^2.3.1", "sass": "^1.20.1", "sass-loader": "^8.0.0", "vue": "^2.5.17", "vue-template-compiler": "^2.6.10" }
安装完成后,Vue组件和JS文件在resources/js
目录下;
入口文件resources/js/app.js
文件
require('./bootstrap'); window.Vue = require('vue'); // 注册组件 Vue.component('example-component', require('./components/ExampleComponent.vue').default); // 挂载实例 const app = new Vue({ el: '#app', });
安装依赖
npm install
代码测试
编写一个Vue组件
在resources/js/components
目录下创建DemoComponent.vue
组件
<template> <div class="container"> <div class="jumbotron"> 这里是自如初博客 </div> </div> </template> <script> export default { // 导出组件 name:'DemoComponent' } </script> <style scoped> </style>
app.js中注册组件
Vue.component('example-component', require('./components/DemoComponent.vue').default);
改造laravel欢迎界面视图
resources/views/welcome.blade.php
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <!--1、 引入支持 Bootstrap 的 CSS 样式文件 --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> </head> <body> <div id="app"> <div> <!-- 3、使用组件 --> <demo-component></demo-component> </div> </div> <!-- 2、引入支持Vue框架和Vue组件的app.js文件 --> <script src="{{ asset('js/app.js') }}"></script> </body> </html>
运行
窗口中运行vue
npm run dev
实时编译
现在的情况是,每改动一次Vue组件就要重新执行npm run dev
,这样非常麻烦;
可以使用npm run watch
命令编译前端资源,每改动一次就会自动进行重新编译
本文网址:https://www.zztuku.com/detail-13791.html
站长图库 - Laravel8中使用vue
申明:本文转载于《自如初博客》,如有侵犯,请 联系我们 删除。
您还没有登录,请 登录 后发表评论!
提示:请勿发布广告垃圾评论,否则封号处理!!