ServBay

Tiếng Việt

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Türkçe
Italiano

Tiếng Việt

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Türkçe
Italiano

Appearance

Tạo và chạy dự án Vue.js trên macOS với ServBay ​

Vue.js là một framework JavaScript tiến bộ, phổ biến dùng để xây dựng giao diện người dùng. Framework này dễ tiếp cận, linh hoạt và hiệu suất cao, đặc biệt phù hợp để phát triển ứng dụng đơn trang (SPA). ServBay, với vai trò là một môi trường phát triển web cục bộ mạnh mẽ, cung cấp hỗ trợ Node.js tiện lợi, là nền tảng lý tưởng để phát triển Vue.js trên macOS.

Hướng dẫn này sẽ trình bày chi tiết cách sử dụng môi trường tích hợp của ServBay để khởi tạo dự án Vue.js từ đầu, truy cập trong chế độ phát triển và triển khai chế độ sản xuất thông qua ServBay.

Vue.js là gì? ​

Vue.js là một framework JavaScript tiến bộ dùng để xây dựng giao diện người dùng. Khác với những framework lớn, Vue thiết kế theo hướng phát triển tăng trưởng từ dưới lên, giúp mở rộng linh hoạt. Thư viện lõi của Vue chỉ tập trung vào tầng view, vừa dễ học vừa dễ tích hợp với các thư viện/công trình hiện hữu. Vue 3 là phiên bản mới nhất, mang lại nhiều tính năng và cải tiến như: hiệu suất cao hơn, kích thước nhỏ gọn, hỗ trợ TypeScript toàn diện hơn.

Các tính năng và ưu điểm nổi bật của Vue 3 ​

  • Composition API: Cho phép tổ chức logic qua các hàm, giúp code các component lớn dễ bảo trì và tái sử dụng.
  • Hiệu năng vượt trội: Vue 3 sử dụng Proxy để xây dựng hệ thống reactivity, tối ưu thuật toán Virtual DOM, mang tới tốc độ xử lý nhanh hơn.
  • Kích thước nhỏ: Nhờ Tree-shaking, thư viện lõi của Vue nhỏ gọn hơn, tải nhanh hơn.
  • Hỗ trợ TypeScript tốt hơn: Vue 3 cung cấp định nghĩa kiểu mạnh mẽ, thuận tiện khi phát triển ứng dụng bằng TypeScript.
  • Vòng đời component cải tiến: Các hook và hàm setup giúp quản lý logic component sáng tỏ, rõ ràng và dễ kiểm soát hơn.

Với Vue 3, lập trình viên có thể xây dựng app web hiện đại, phản hồi nhanh một cách hiệu quả.

Tạo và chạy dự án Vue.js bằng môi trường tích hợp của ServBay ​

Trong bài viết này, bạn sẽ sử dụng môi trường Node.js mà ServBay cung cấp để tạo và vận hành dự án Vue.js. Chúng ta sẽ tận dụng tính năng Website của ServBay để cấu hình server web, áp dụng proxy ngược và phục vụ file tĩnh cho phép truy cập cục bộ.

Điều kiện cần chuẩn bị ​

Trước khi bắt đầu, hãy đảm bảo bạn đã hoàn tất các bước sau:

  1. Cài đặt ServBay: Bạn đã cài thành công môi trường phát triển cục bộ ServBay trên macOS.
  2. Cài đặt gói Node.js: Thông qua tính năng quản lý gói của ServBay, bạn đã cài Node.js. Xem hướng dẫn chi tiết tại Cài đặt và sử dụng Node.js trong ServBay.

Khởi tạo dự án Vue.js ​

  1. Khởi tạo dự án

    Trước tiên, mở ứng dụng Terminal. ServBay khuyến nghị bạn đặt folder dự án vào thư mục /Applications/ServBay/www. Di chuyển tới thư mục này và khởi tạo dự án Vue.js mới bằng lệnh npm create vue@latest. Tham số @latest đảm bảo bạn sử dụng công cụ create-vue/CLI mới nhất, mặc định là Vue 3.

    bash
    cd /Applications/ServBay/www
npm create vue@latest

    Làm theo hướng dẫn trên terminal để nhập tên dự án (khuyến nghị đặt là servbay-vue-app) và lựa chọn TypeScript, Vue Router, Pinia ... theo ý muốn. Cấu hình ví dụ:

    bash
    ✔ Project name: … servbay-vue-app
✔ Add TypeScript? … No # Tùy ý chọn Yes hoặc No
✔ Add JSX Support? … No # Tùy ý chọn Yes hoặc No
✔ Add Vue Router for Single Page Application development? … Yes # Khuyến nghị chọn Yes
✔ Add Pinia for state management? … No # Tùy ý chọn Yes hoặc No
✔ Add Vitest for Unit testing? … No # Tùy ý chọn Yes hoặc No
✔ Add an End-to-End Testing Solution? … No # Tùy ý chọn Yes hoặc No
✔ Add ESLint for code quality? … Yes # Khuyến nghị chọn Yes
✔ Add Prettier for code formatting? … Yes # Khuyến nghị chọn Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # Tùy ý chọn Yes hoặc No

  2. Cài đặt dependencies

    Sau khi khởi tạo, chuyển vào thư mục dự án mới servbay-vue-app và chạy lệnh npm install để cài đặt đầy đủ các phụ thuộc cần thiết.

    bash
    cd servbay-vue-app
npm install

Tùy chỉnh nội dung mẫu của dự án (không bắt buộc) ​

Để kiểm tra dự án chạy thành công chưa, bạn có thể chỉnh file src/App.vue cho xuất ra "Hello ServBay!" đơn giản.

Hãy mở file src/App.vue và thay nội dung thành:

html
<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>This is a Vue.js app running via ServBay.</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Cấu hình môi trường phát triển (sử dụng proxy ngược) ​

Dự án Vue khi phát triển sẽ chạy một server local (dựa trên Vite hoặc Webpack), cung cấp tính năng Hot Module Reload (HMR) tiện lợi. ServBay có thể thiết lập proxy ngược, ánh xạ tên miền local tới địa chỉ và cổng của server phát triển này.

  1. Chạy server phát triển

    Trong thư mục gốc dự án, chạy lệnh sau để khởi động server phát triển. Dùng tham số --port chỉ định cổng (ví dụ: 8585), đảm bảo cổng này không bị chương trình khác chiếm dụng.

    bash
    npm run dev -- --port 8585

    Terminal sẽ cho biết server đã khởi động và lắng nghe tại cổng vừa chọn, ví dụ http://localhost:8585.

  2. Cấu hình proxy ngược trên ServBay

    Mở giao diện ServBay, vào phần Website. Thêm một cấu hình website mới, chọn loại Proxy Ngược:

    • Tên: My first Vue dev site (hoặc tên dễ nhận biết khác)
    • Tên miền: servbay-vue-dev.servbay.demo (hoặc bất kỳ tên miền .servbay.demo bạn muốn)
    • Loại website: Proxy Ngược
    • Địa chỉ IP đích proxy: 127.0.0.1
    • Cổng đích proxy: 8585 (trùng với cổng server phát triển)

    Sau khi lưu, ServBay sẽ tự động cập nhật cấu hình web server (Caddy hoặc Nginx), chuyển hướng yêu cầu truy cập tên miền servbay-vue-dev.servbay.demo tới http://127.0.0.1:8585.

    Xem thêm hướng dẫn chi tiết tại Thêm website Node.js phát triển trên ServBay.

  3. Truy cập chế độ phát triển

    Đảm bảo web server của ServBay đang chạy. Mở trình duyệt và truy cập tên miền bạn vừa cấu hình: https://servbay-vue-dev.servbay.demo.

    Do ServBay hỗ trợ tự động cấp SSL cho tên miền local (qua ServBay User CA hoặc ServBay Public CA), bạn có thể truy cập local development site qua HTTPS một cách an toàn – tương tự môi trường production. Xem chi tiết về cài đặt SSL tại Cấu hình SSL cho website trong ServBay.

    Bây giờ bạn đã có thể thấy dự án Vue chạy ở chế độ dev trên trình duyệt, đồng thời trải nghiệm khả năng reload tự động khi thay đổi code.

Build bản sản xuất và triển khai (dùng website tĩnh) ​

Khi hoàn thiện, bạn cần build ra bản tối ưu cho production. Bản này sẽ là tập hợp các file tĩnh (HTML, CSS, JS...) dễ dàng triển khai với tính năng website tĩnh của ServBay.

  1. Build bản production

    Ở thư mục gốc dự án, chạy lệnh sau để tạo bản build:

    bash
    npm run build

    Kết quả sẽ sinh ra một thư mục static tối ưu ở dist trong thư mục dự án.

  2. Cấu hình phục vụ file tĩnh

    Mở giao diện ServBay, vào mục Website. Thêm cấu hình website mới, chọn loại Tĩnh:

    • Tên: My first Vue production site (hoặc bất kỳ tên dự án nào bạn muốn)
    • Tên miền: servbay-vue-prod.servbay.demo (hoặc tên miền .servbay.demo khác)
    • Loại website: Tĩnh
    • Thư mục gốc website: /Applications/ServBay/www/servbay-vue-app/dist (trỏ tới đường dẫn tuyệt đối thư mục dist bạn vừa build)

    Sau khi lưu, ServBay sẽ cấu hình server phục vụ trực tiếp các file static trong thư mục này.

  3. Truy cập bản production

    Đảm bảo web server ServBay đã chạy. Mở trình duyệt và truy cập tên miền đã cấu hình: https://servbay-vue-prod.servbay.demo.

    Lúc này bạn thấy phiên bản production của app Vue, đã được tối ưu cho hiệu suất tải nhanh nhất. Nhờ các tính năng tên miền tuỳ chỉnh và SSL tự động của ServBay, bạn có thể preview website production một cách an toàn ngay trên máy local.

Lưu ý ​

  • Xung đột cổng: Nếu cổng bạn chọn (ví dụ 8585) đã có ứng dụng khác sử dụng, lệnh npm run dev sẽ báo lỗi. Hãy đổi sang cổng khác chưa bị chiếm và cập nhật lại thông tin cổng trong cấu hình proxy của ServBay.
  • Trạng thái server web của ServBay: Hãy chắc chắn web server (Caddy hoặc Nginx, tuỳ cấu hình) của ServBay đang chạy, nếu không bạn sẽ không thể truy cập website qua domain đã gán.
  • Tên miền và DNS: ServBay sẽ tự động cấu hình các domain .servbay.demo trỏ về local (127.0.0.1). Nếu bạn sử dụng tên miền khác, có thể phải tự chỉnh file hosts hệ thống hoặc dùng tính năng Hosts Manager của ServBay để trỏ đúng.

Tổng kết ​

Với ServBay, bạn dễ dàng xây dựng môi trường phát triển cục bộ Node.js, quản trị dự án Vue.js từ development đến deployment sản xuất ngay trên macOS. Nhờ tính năng Website mạnh mẽ, bạn chỉ cần vài bước để cấu hình proxy ngược cho server phát triển hay triển khai trực tiếp bản build static, lại tận dụng tiện ích domain tuỳ chỉnh và SSL tự động – tối ưu bảo mật, đơn giản workflow. Điều này giúp việc khởi tạo, phát triển và quản trị dự án Vue.js trên local chưa bao giờ thuận tiện đến thế!