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