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

4 min readMar 17, 2019

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 ก็จะใช้งานร่วมกันได้

ทำไมเลือก 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 ก่อน

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

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

แนะนำแต่ละ 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

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

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

เนื่องจาก 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