本篇文章給大家帶來了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
命令編譯前端資源,每改動一次就會自動進行重新編譯