本教程介紹在laravel中部署vue，在Laravel包含了一些基本腳手架，以便使用Vue庫更容易開始編寫現(xiàn)代JavaScript 。Vue為使用組件構建強大的JavaScript應用程序提供了富有表現(xiàn)力的API。我們可以使用Laravel Mix輕松地將JavaScript組件編譯成一個可以瀏覽器的JavaScript文件。
相關推薦：最新的五個Laravel視頻教程、最新的5個vue.JS視頻教程精選
創(chuàng)建laravel
首先，你要有一個composer,然后，你便有了一個laravel。 運行命令composer create-project –prefer-dist laravel/laravel blog創(chuàng)建一個新的laravel項目（具體創(chuàng)建laravel請到官網(wǎng)學習）。
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> ????????<h1>Hello?World!</h1> ????</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> ????????<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，代碼如下。
nbsp;html> ????<meta> ????<meta> ????<title>Hello</title> ????<div></div> ????<script></script> ????<script></script> ????<script></script>
在/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’);});
最后
有時候運行npm時會提示W(wǎng)rite EIO錯誤，可能是因為編碼的問題造成，這種時候可用管理員身份運行命令行文件，或者運行chcp 850設置活動代碼頁編號，介紹在laravel中部署vue的教程基本結(jié)束，如果您有興趣了解更多關于編寫Vue組件的信息,你可以閱讀Vue文檔,就醬。
