[Day 23] Laravel + Vue.js - 環境設置 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 23

Modern Web

初探Vue.js 30天系列第 23 篇

[Day 23] Laravel + Vue.js - 環境設置

12th鐵人賽 vue.js laravel

Peter Lu

2020-10-07 01:01:23

3138 瀏覽

分享至

環境介紹

後端框架 Laravel 6
前端框架 Vue.js 2.6

Mac環境

安裝 Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

安裝 Composer

brew install composer

利用Composer安裝Laravel

建立專案名稱為2020_ironman

composer create-project --prefer-dist laravel/laravel 2020_ironman 6.*

安裝Vue
用npm在Laravel中安裝Vue

npm install --save-dev vue@2.6.12

設置Laravel專案內環境

Vue全域變數
在Laravel resources/js/app.js，設置全域變數Vue

window.Vue = require('vue');

Vue show Hello world!

Goal - 呈現Hello World!在網頁上

建立Blade (View)

Laravel將Blade放在resources/views目錄

// hello.blade.php
<html>
    <body>
        <div id="app">
            @{{ message }}
        </div>
        <script src="{{mix('js/app.js')}}"></script>
        <script src="{{mix('js/hello.js')}}"></script>
    </body>
</html>

建立Vue Instance，並掛載laravle balde

Laravel將JS放在resources/js目錄下

// hello.js
new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})

用Laravel Webpack mix編譯JS檔案

在webpack.mix.js設置要編譯的檔案(hello.js)

mix.js('resources/js/app.js', 'public/js')
   .js('resources/js/hello.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

laravel Route，在routes/web.php設置，此處直接return view (hello blade)

Route::get('/', function () {
    return view('hello');
});

Run Script - Laravel Mix編譯

npm run dev

Start Serve

$ php artisan serve
Starting Laravel development server: http://127.0.0.1:8000

Vue官方有提供Vue Devtools方便檢查元件的資料，也可以查看Vuex的事件與資料變化。
Chrome Plugin
Firefox Plugin

[Day 22] Vue Router 前端路由

[Day 24] Lodash - JS library

系列文

初探Vue.js 30天共 30 篇

RSS系列文訂閱系列文

17 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙

初探Vue.js 30天系列 第 23 篇