溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“如何在Laravel中部署vue”，在日常操作中，相信很多人在如何在Laravel中部署vue問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何在Laravel中部署vue”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
Laravel+vue之環(huán)境部署
本教程介紹在Laravel中部署vue，在Laravel包含了一些基本腳手架，以便使用Vue庫更容易開始編寫現(xiàn)代JavaScript 。Vue為使用組件構(gòu)建強大的JavaScript應用程序提供了富有表現(xiàn)力的API。我們可以使用Laravel Mix輕松地將JavaScript組件編譯成一個可以瀏覽器的JavaScript文件。
創(chuàng)建laravel
首先，你要有一個composer,然后，你便有了一個laravel。 運行命令composer create-project --prefer-dist laravel/laravel blog創(chuàng)建一個新的laravel項目。
Hello world!
打開命令行，進入你的項目內(nèi)cd blog
在開始前，由于各種你懂得原因，npm作為國外的node倉庫安裝工具，操作的時候可能會發(fā)生速度慢等各種問題，一般推薦用taobao源進行加速,后面代碼同樣加上后綴即可，下載項目默認依賴，代碼如下。
npm install --registry=https://registry.npm.taobao.org
下載vue路由管理，代碼如下。
npm install vue-router --save-dev
在/resources/assets/js/components中新建一個HelloComponent.vue自定義組件文件，代碼如下。
<template>
<div>
<h2>Hello World!</h2>
</div>
</template>
<script>
export default{
data(){
return {
}
}
}
</script>在/resources/assets/js下新建文件夾router,并在里面新建hello.js,并通過嵌套路由配置將hello路由映射到剛剛新創(chuàng)建的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))
},
]
})在當前l(fā)aravel項目中/resources/assets/js下新建hello.vue,做為主界面，嵌套路由視圖，代碼如下。
<template>
<div>
<h2>Hello</h2>
<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');保存后在命令行中本項目目錄下執(zhí)行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');});
到此，關于“如何在Laravel中部署vue”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
