Sử dụng Vue-cli trong ứng dụng Laravel thay thế Laravel Mix

Các phiên bản Laravel từ 5.3 trở về trước Laravel sử dụng Laravel Elixir, đến phiên bản Laravel 5.4, Laravel giới thiệu công cụ mới là Laravel Mix, đây đều là các công cụ hỗ trợ việc biên dịch, đóng gói các file javascript và css. Laravel 5.4 cũng xây dựng sẵn một ứng dụng mẫu nhỏ cho Vue.js nằm trong resources/assets.

Tại sao sử dụng vue-cli trong Laravel

Rõ ràng rằng Laravel đã chuẩn bị sẵn mọi thứ cho chúng ta, vậy tại sao chúng ta không dùng mà lại thay bằng công cụ vue-cli, có mấy lý do như sau:

• Cấu trúc ứng dụng mẫu Vue.js tạo ra bởi vue-cli dễ dàng để đọc và phát triển thêm hơn.
• Trong ứng dụng mẫu Vue.js có tùy chọn cài đặt vue-router để xây dựng các ứng dụng đơn trang, điều này chưa có ở ứng dụng mẫu có sẵn trong Laravel.
• Thiết lập cấu hình thực hiện đóng gói tường minh hơn.

Vậy còn chần chừ gì nữa, chúng ta sử dụng vue-cli thôi.

Tạo ứng dụng mẫu Vue.js trong Laravel

Nếu bạn sử dụng framework khác Laravel, hoặc chỉ viết một ứng dụng tĩnh bạn có thể chỉ cần cài đặt ứng dụng mẫu Vue bằng vue-cli riêng biệt. Trong Laravel, chúng ta sẽ thực hiện xây dựng ứng dụng mẫu theo các bước như sau: ### Bước 1: Cài đặt Laravel

Sử dụng lệnh thông qua composer hoặc cài đặt trực tiếp bằng gói laravel.

composer create-project laravel/laravel my-app

Hoặc

laravel new my-app

Bước 2: Cài đặt vue-cli (nếu chưa cài)

npm install -g vue-cli

Bước 3: Cài đặt ứng dụng mẫu cho Vue.js trong Laravel

Chuyển đến thư mục gốc dự án Laravel và thực hiện lệnh vue init webpack resources, lệnh này sẽ tải ứng dụng mẫu Vue.js về

c:\>xampp\htdocs\my-app>vue init webpack resources 
  This will install Vue 2.x version of the template.

  For Vue 1.x use: vue init webpack#1.0 resources 

? Project name resources 
? Project description A Vue.js project for Laravel
? Author Kien Dang <kiendang@allaravel.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "resources".

   To get started:

     cd resources
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

Sau khi tải ứng dựng mẫu về xong, chuyển đến thư mục resources và thực hiện cài đặt các gói cần thiết bằng lệnh npm install.

c:\xampp\htdocs\my-app\resources>npm install
[..................] / normalizeTree: sill install loadCurrentTree

Chờ một lúc các gói cần thiết được tải về, với các ứng dụng Vue.js độc lập như vậy là chúng ta đã thiết lập xong.

Bước 4: Thiết lập chế độ build và route trong Laravel

Khi thực hiện chế độ npm run dev để thực hiện dev, dev server của Vue chạy trên một cổng trong khi ứng dụng Laravel chạy trên Apache hoặc NginX ở một cổng khác. Do vậy, chúng ta cần cấu hình cổng dev server của Vue trong resources/config/index.js. Chúng ta cũng thiết lập chế độ watch mode để khi chạy npm run dev sẽ tự động biên dịch các file thay đổi, mở file package.json và thay đổi chế độ dev thành:

"dev": "cross-env NODE_ENV=development webpack --watch --progress --colors"

Thực hiện build ứng dụng để triển khai trên máy chủ

Mặc định khi thực hiện npm run build trong ứng dụng mẫu Vue.js thì nó sẽ build vào thư mục dist, nhưng ở đây chúng ta muốn build vào thư mục public trong thư mục gốc dự án và file html thì build vào view. Để thực hiện chúng ta thay đổi resources/config/index.js như sau:

var path = require('path')

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../views/welcome.blade.php'),
    assetsRoot: path.resolve(__dirname, '../../public'),
...

Khi đó thực hiện npm run build và mở lại file welcome.blade.php bạn sẽ thấy nội dung view này đã được đóng gói bằng Webpack. Thiết lập route trong Laravel cho ứng dụng đơn trang Ứng dụng đơn trang SPA được xây dựng tất cả các tính năng chỉ trong một trang duy nhất, vì vậy chúng ta cần route toàn bộ các đường dẫn vào view welcome.blade.php

Route::any('{all}', function () {
    return view('welcome');
})
->where(['all' => '.*']);

Lời kết

Nếu bạn xây dựng ứng dụng đơn trang dựa trên Laravel và Vue.js thì vue-cli là công cụ rất cần thiết để tạo ra một mẫu ứng dụng nhanh chóng, từ đây bạn chỉ cần tập trung vào các tính năng chính của mình. Bạn hãy trải nghiệm và cho mình biết cảm nghĩ của bạn thế nào nhé.

---

CÁC BÀI VIẾT KHÁC