มาลองใช้ Vue.js บน Laravel 5.8 กันเถอะ

เกริ่นนำก่อนเลยนะครับ บริษัท I GEAR GEEK มีโปรเจคใหม่เข้ามา และต้องการทำเว็บแอปแบบ SPA (Single Page Application) ถ้าอธิบายแบบเข้าใจง่ายนั่นก็คือ เว็บแบบไม่ต้องโหลดหน้าใหม่ ซึ่ง Laravel เป็นตัวเลือกที่เหมาะสม เนื่องจาก Backend ใช้เป็น Laravel และ Laravel ก็มี Vue.js ติดตั้งมาให้ เพียงแค่ต้องไปตั้งค่านิดหน่อย สำหรับวันนี้ผมจะมาอธิบายวิธีการติดตั้ง Laravel ร่วมกันกับ Vue.js

สิ่งที่ควรรู้

• พื้นฐานภาษา php
• พื้นฐานภาษา javascript
• พื้นฐาน git version control

สิ่งที่ต้องมีในเครื่อง

• Composer ใช้สำหรับลง Package ของ php
• Node.js ใน Node.js จะ npm ใช้สำหรับลง Package เหมือนกับ composer แต่เป็น package ของ javascript
• Code editor เช่น Visual Studio Code

Step 1: Intial Laravel

clone โปรเจคจาก github ของ laravel

git clone https://github.com/laravel/laravel.git laravel-vue

Step 2: Setup laravel

เข้าไปที่ directory ชื่อ laravel-vue

cd laravel-vue

ทำการ install dependency composer

composer install

ทำการ สร้างไฟล์ .env แล้วคัดลอกจาก .env.example

cp .env.example .env

ทำการ generate key APP_KEY

php artisan key:generate

Step 3: Run laravel

ทำการ run laravel

php artisan serve

รันคำสั่งแล้วจะเจอแบบนี้ จากนั้น เข้าเว็บ 127.0.0.1:8000 ใน browser

ถ้าเจอหน้านี้แสดงว่า laravel ใช้งานได้ มาต่อกันที่ Vue.js กัน

Step 4: Setup Vue.js

ทำการ install dependency package

npm install

โครงสร้างของ Vue.js

Vue.js ใน laravel ส่วนที่สำคัญ คือ folder /resources/js ประกอบไปด้วย

• /components คือ folder ที่รวม component ต่าง ๆ
• app.js คือ ไฟล์ที่ใช้งาน component, router หรือ library ต่าง ๆ
• bootstrap.js คือ ไฟล์สำหรับการ import ต่าง ๆ

ตัวอย่างไฟล์ component ของ vue.js

ใน component หลัก ๆ จะมีสองส่วน ส่วนแรก template ก็คือ html เลย และส่วนที่สอง คือ script ใช้กำหนดตัวแปร และสร้างฟังก์ชันต่าง ๆ

ตัวอย่างไฟล์ app.js

จากรูปด้านบน

• vue.component() เป็นการกำหนด component จากภาพชื่อ ‘example-component’ เวลาเรียกใช้ใน template ก็จะเป็น tag <example-component></example-component>
• el คือ การกำหนดให้ Vue.js แสดง component จากที่ไหน จากโค้ด el: ‘#app’ กำหนดให้แสดงภายใน id =”app”

ตัวอย่างไฟล์ที่เรียกใช้ Vue.js

จากโค้ดด้านบน ให้ทำการคัดลอกแล้วไปทับที่ path

/resources/views/welcome.blade.php 

tag <div> ทำการกำหนด id=”app” เพื่อแสดงข้อมูล ภายใน tag <div> กำหนด component ที่ใช้แสดง จากนั้นใส่ script ด้านล่าง

Step 5: Run Vue.js

ทำการ run vue.js

npm run dev

เพียงเท่านี้ก็สามารถใช้ vue.js ได้แล้วครับ

สรุป

จะเห็นได้ว่า Vue.js จะอยู่ในตัวของ Laravel เลย ไม่จำเป็นต้องสร้างโปรเจคแยก ส่วน port ก็ใช้ port เดียวกันด้วย ทำให้สร้าง app กับ api ไม่ต้องแยก port เหมาะสำหรับโปรเจคที่ใช้ Laravel อยู่แล้วและอยากได้เว็บแอปแบบ SPA ครับ สำหรับบทความครั้งต่อไปก็จะเป็น Laravel + Vue.js เหมือนเดิมครับ อาจจะเป็น Vue-Router หรือ Vue-Bootstrap ครับ