สร้าง Single Page Web App ด้วย Laravel5 และ VueJS2

Laravel Framework

ได้ถือกำเนิดเมื่อ 7 ปีที่แล้ว และปัจจุบันก็เป็น version 5 เรียกได้ว่าด้วยระยะเวลาของตัว Framework เองและ Technology ที่เปลี่ยนไปตามกาลเวลาทำให้ Laravel ดูน่าใช้งานยิ่งขึ้น

Web ยุคนี้ต้องเร็ว Single Page เท่านั้นที่ตอบโจทย์

Framework ที่ได้รับความนิยมสำหรับทำ Single Page web app ก็จะมีหลาย Frameworks เช่น React, VueJS, Angular เป็นต้น เรียกว่าแต่ละ Frameworks ก็จะมีข้อดีของตัวเอง

โดยส่วนตัวมีความชอบใช้งาน VueJS อยู่แล้ว

Laravel Framework เลือกที่เอา VueJS มาเป็น Default Js Framework โดยหลักการที่เราจะทำให้ Laravel ทำงานร่วมกับ VueJS ได้ก็ต้องมี JS Compiler Syntax ของ VueJS ให้เป็น JS2015 ด้วย Laravel webpack Mix และก็ import JS ก็จะใช้งานร่วมกันได้

Image for post

ทำไมเลือก Laravel & VueJS

ความง่ายในการพัฒาของ Laravel เพราะ Laravel จะมี artisan command line ช่วยในการ Generate Source File เรียกว่าง่ายมาก ๆ หากเข้าใจตัวรูปแบบคำสั่ง และการที่เลือก VueJS มาทำเป็น Single Page เพราะผมเองก็ใช้งาน VueJS อยู่แล้ว ประกอบกับ Laravel มี VueJs ใน package.json อยู่แล้ว

ิ่มสร้าง Laravel กันเถอะ

มีวิธีการ Create ได้ 2 แบบ เริ่มด้วยติดตั้ง Composer Dependencies Library Management ก่อน

  1. ติดตั้ง Laravel Global Package เพื่อใช้ Comnamd Line “laravel”
    $ composer global require laravel/installer
    $ laravel new medium
Image for post
Image for post

2. ติดตั้ง ด้วย “Create Project”
composer create-project --prefer-dist laravel/laravel medium

Image for post
Image for post
Image for post

แนะนำแต่ละ Folder & File ก่อนว่าเอาไว้ทำอะไรกันบ้าง (บอกที่เห็นว่าต้องรู้ก่อนในช่วงเริ่มต้นเขียน Laravel)

/app: เป็นส่วนที่เป็น code controllers , models , services ต่าง ๆ
/public: เป็นส่วนที่ laravel compile เสร็จในขณะ Run Programe
/resources: code js,css,views (blades) ต่าง ๆ จะถูกเขียนอยู่ที่ folder resourcesนี้
/routes: mapping url ของ app เรา ไฟล์ web.php จะเป็นไฟล์สำหรับ map route url ต่าง ๆ
/storage: ถ้ามีการยุ่งเกี่ยวกับเรื่อง File ต่าง ๆ จะเป็นทีี่เก็บไฟล์เหล่านั้น
/tests: สำหรับเก็บ File Unittests ต่าง ๆ
/vendor: เก็บ Third Party Libraries ต่าง ๆ
/.env: config datasource Connection และ Config อื่น ๆ
/package.json: เป็นไฟล์ meta data ของ app และเป็นไฟล์ control dependencies และ scripts run ต่าง ๆ ถือเป็นหัวใจหลักของ Javascript Project เลยนะ
/webpack.mix.js: ไฟล์ config script mix resources ต่าง ๆ เช่น js, css ,images , font เป็นต้น โดยจะทำการ read config คำสั่งในไฟล์ นี้ และทำการ compile เก็บ output file ใส่เอาไว้ที่ folder /public สุดท้ายปลายทางของเรา โดย สามารถ copyFolder,Minifier Js,Css,Sass,Less, เพิ่มประสิทธิภาพความเร็วของ web single page ได้เป็นอย่างดี

เรื่องราวของ laravel mix (webpack บน Laravel)

ถ้าอยากจะใช้ laravel mix ก็ต้อง install nodejs,npm หรือ yarn เปิด devDependencies ที่ laravel เตรียมให้กันว่าเตรียมอะไรให้เราบ้าง

add vue-route เพิ่มต่อเข้าไป และ remove บาง dependencies ออกก่อน เพราะ blog นี้จะเขียนเกี่ยวกับ Laravel & Vue ที่เป็น Single Page ขอ Focus ใช้ Dependencies ที่จำเป็น

จากนั้นก็ npm install

Image for post

รอไม่นานก็เรียบร้อย

Running Mix

เมื่อ Install devDependencies เรียบร้อยแล้วก็ถึงเวลา Laravel Mix ต้องทำงาน จะมี 3 คำสั่งที่ใช้ Runing Mix คือ

// Run all Mix tasks...
npm run dev

// Run all Mix tasks and minify output...
npm run production
// Hot Reload Running Mix tasks...
npm run watch

คำสั่ง laravel mix จะอ่าน Config Script Code ในไฟล์ webpack.mix.js

และ จะได้ไฟล์ output เก็บไว้ที่ folder /public ตาม config ที่ใส่เข้าไป ทดสอบรันด้วยคำสั่ง
npm run dev

Image for post

เนื่องจาก devDependencies ที่ remove ออกจาก Default ที่ laravel ให้มาจะมีการเรียกใช้งาน แต่เราไม่ได้ install ก็ให้แก้โดย

  • comment code ที่ /resources/sass/app.sass => //@import ‘~bootstrap/scss/bootstrap’;
  • comment code ที่ /resources/js/app.js =>//require(‘./bootstrap’);
  • remove file code ที่ /resources/js/bootstrap.js ทิ้งไปก่อน

ลอง npm run dev

Image for post

จะได้ไฟล์หลังจาก Run Laravel Mix

/public/css/app.css
/public/js/app.js

ก็ให้ import script เข้าไปที่ไฟล์ index.blade.php ต่อไปก็จะเป็นการเรียกใช้ resource js,css ที่ได้จากการ Run Laravel Mix (webpack บน Laravel)

เข้าเนื้อหาหลักเริ่มสร้าง Single Page web app กันเถอะ

  • สร้างไฟล์ /resources/views/single.blade.php กำหนดเป็นถือว่าเป็น route ของ laravel ที่เป็นลักษณะ GET any (.*)
  • แก้ไขไฟล์ /resources/js/app.js ใส่ code Vue Route
  • สร้างไฟล์ /app/Http/Controllers/MediumController.php ให้เป็น route page ของ Laravel View
  • แก้ไขไฟล์ /routes/web.php

run คำสั่ง npm run production เพื่อให้ Recompile File app.js

run คำสั่ง php artisan serve

Image for post
Image for post
Image for post
Image for post
Image for post

source code github

ขอบคุณที่ติดตามบทความมาจนถึงท้ายบทความนี้

Written by

Senior Developer @Telecom, Full Stack Developer [Subscribe Me @poolsawat.com]

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store