詳解怎麼在Laravel部署vue
Laravel vue之環境部署
本教學介紹在Laravel中部署vue，在Laravel包含了一些基本鷹架，以便使用Vue庫更容易開始編寫現代JavaScript 。 Vue為使用元件建立強大的JavaScript應用程式提供了富有表現力的API。我們可以使用Laravel Mix輕鬆地將JavaScript元件編譯成一個可以瀏覽器的JavaScript檔案。
創建laravel
首先，你要有一個composer,然後，你便有了一個laravel。執行指令composer create-project --prefer-dist laravel/laravel blog建立一個新的laravel專案（具體建立laravel請到官網學習）。
Hello world!
打開命令列，進入你的專案內cd blog
在開始前，由於各種你懂得原因，npm作為國外的node倉庫安裝工具，操作的時候可能會發生速度慢等各種問題，一般推薦用taobao源進行加速,後面代碼同樣加上後綴即可，下載項目默認依賴，代碼如下。
npm install --registry=https://registry.npm.taobao.org
下載vue路由管理，程式碼如下。
npm install vue-router --save-dev
在/resources/assets/js/components中新建一個HelloComponent.vue自訂元件文件，程式碼如下。
<template>
<div>
<h1>Hello World!</h1>
</div>
</template>
<script>
export default{
data(){
return {
}
}
}
</script>在/resources/assets/js下新資料夾router,並在裡面新建hello.js,並透過巢狀路由設定將hello路由對應到剛剛新建立的HellowComponent元件當中，程式碼如下。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
saveScrollPosition: true,
routes: [
{
name: "hello",
path: '/',
component: resolve =>void(require(['../components/HelloComponent.vue'], resolve))
},
]
})在目前laravel專案中/resources/assets/js下新建hello.vue,做為主介面，巢狀路由視圖，程式碼如下。
<template>
<div>
<h1>Hello</h1>
<router-view></router-view>
</div>
</template>
<script>
export default{
data(){
return {
}
}
}
</script>接著在/resources/assets/js下新建hello.js，程式碼如下。
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import App from './hello.vue'
import router from './router/hello.js'
const app = new Vue({
el: '#app',
router,
render: h=>h(App)
});在/resources/views下新建hello.blade.php，程式碼如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Hello</title>
</head>
<body>
<div id="app"></div>
<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/hello.js') }}"></script>
</body>
</html>在/resources/routes/web.php中新增路由，程式碼如下。
Route::view('/hello','/hello');
修改webpack.mix.js，程式碼如下。
mix.js('resources/assets/js/app.js', 'public/js') .js('resources/assets/js/hello.js', 'public/js') .extract(['vue', "vue-router", "axios"]) .sass('resources/assets/sass/app.scss', 'public/css');
儲存後在命令列中本項目目錄下執行npm run watch,進行重新編譯
可以在命令列中本項目目錄下輸入php artisan serve,訪問http:// 127.0.0.1:8000/hello即可看到效果
laravel5.5起新增了Route::view和Route::redirect方法，5.4及以下的路由可以寫成這樣Route::get(' /hello', function () {return view('hello');});
#最後
有時候執行npm時會提示Write EIO錯誤，可能是因為編碼的問題造成，這種時候可用管理員身份運行命令列文件，或者運行chcp 850設定活動代碼頁編號，介紹在laravel中部署vue的教程基本結束，如果您有興趣了解更多關於編寫Vue組件的資訊,你可以閱讀Vue文檔,就醬。
以上是詳解怎麼在Laravel部署vue的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
vue怎麼給按鈕添加函數
Apr 08, 2025 am 08:51 AM
可以通過以下步驟為 Vue 按鈕添加函數：將 HTML 模板中的按鈕綁定到一個方法。在 Vue 實例中定義該方法並編寫函數邏輯。
vue.js怎麼引用js文件
Apr 07, 2025 pm 11:27 PM
在 Vue.js 中引用 JS 文件的方法有三種：直接使用 <script> 標籤指定路徑；利用 mounted() 生命週期鉤子動態導入；通過 Vuex 狀態管理庫進行導入。
vue中怎麼用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。
vue中的watch怎麼用
Apr 07, 2025 pm 11:36 PM
Vue.js 中的 watch 選項允許開發者監聽特定數據的變化。當數據發生變化時，watch 會觸發一個回調函數，用於執行更新視圖或其他任務。其配置選項包括 immediate，用於指定是否立即執行回調，以及 deep，用於指定是否遞歸監聽對像或數組的更改。
vue返回上一頁的方法
Apr 07, 2025 pm 11:30 PM
Vue.js 返回上一頁有四種方法：$router.go(-1)$router.back()使用 <router-link to="/"> 組件window.history.back()，方法選擇取決於場景。
Laravel的地理空間：互動圖和大量數據的優化
Apr 08, 2025 pm 12:24 PM
利用地理空間技術高效處理700萬條記錄並創建交互式地圖本文探討如何使用Laravel和MySQL高效處理超過700萬條記錄，並將其轉換為可交互的地圖可視化。初始挑戰項目需求：利用MySQL數據庫中700萬條記錄，提取有價值的見解。許多人首先考慮編程語言，卻忽略了數據庫本身：它能否滿足需求？是否需要數據遷移或結構調整？ MySQL能否承受如此大的數據負載？初步分析：需要確定關鍵過濾器和屬性。經過分析，發現僅少數屬性與解決方案相關。我們驗證了過濾器的可行性，並設置了一些限制來優化搜索。地圖搜索基於城
怎樣查詢vue的版本
Apr 07, 2025 pm 11:24 PM
可以通過以下方法查詢 Vue 版本：使用 Vue Devtools 在瀏覽器的控制台中查看“Vue”選項卡。使用 npm 運行“npm list -g vue”命令。在 package.json 文件的“dependencies”對像中查找 Vue 項。對於 Vue CLI 項目，運行“vue --version”命令。檢查 HTML 文件中引用 Vue 文件的 <script> 標籤中的版本信息。
vue遍歷怎麼用
Apr 07, 2025 pm 11:48 PM
Vue.js 遍歷數組和對像有三種常見方法：v-for 指令用於遍歷每個元素並渲染模板；v-bind 指令可與 v-for 一起使用，為每個元素動態設置屬性值；.map 方法可將數組元素轉換為新數組。
