Laravel+vue之環境部署

NO IMAGE

本教程介紹在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!

  1. 打開命令行,進入你的項目內cd blog

  2. 在開始前,由於各種你懂得原因,npm作為國外的node倉庫安裝工具,操作的時候可能會發生速度慢等各種問題,一般推薦用taobao源進行加速,後面代碼同樣加上後綴即可,下載項目默認依賴,代碼如下。

npm install  --registry=https://registry.npm.taobao.org
  1. 下載vue路由管理,代碼如下。
npm install vue-router --save-dev
  1. /resources/assets/js/components中新建一個HelloComponent.vue自定義組件文件,代碼如下。
<template>
<div>
<h1>Hello World!</h1>
</div>
</template>
<script>
export default{
data(){
return {
}
}
}
</script>
  1. /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))
},
]
})
  1. 在當前laravel項目中/resources/assets/js下新建hello.vue,做為主界面,嵌套路由視圖,代碼如下。
<template>
<div>
<h1>Hello</h1>
<router-view></router-view>
</div>
</template>
<script>
export default{
data(){
return {
}
}
}
</script>
  1. 接著在/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)
});
  1. /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>
  1. /resources/routes/web.php中新增路由,代碼如下。
Route::view('/hello','/hello');
  1. 修改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');
  1. 保存後在命令行中本項目目錄下執行npm run watch,進行重新編譯

  2. 可以在命令行中本項目目錄下輸入php artisan serve,訪問http://127.0.0.1:8000/hello即可看到效果

laravel5.5起新增了Route::viewRoute::redirect方法,5.4及以下的路由可以寫成這樣Route::get('/hello', function () {return view('hello');});

最後

有時候運行npm時會提示Write EIO錯誤,可能是因為編碼的問題造成,這種時候可用管理員身份運行命令行文件,或者運行chcp 850設置活動代碼頁編號,介紹在laravel中部署vue的教程基本結束,如果您有興趣瞭解更多關於編寫Vue組件的信息,你可以閱讀Vue文檔,就醬。
\(•ㅂ•)/♥ 共勉~

相關文章

nodejs微服務框架解決方案

淺析網絡應用中常用的加密手段

為什麼Julia這麼快?

PHP中類和文件的代碼註釋規範