ServBay

Tiếng Việt

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Tiếng Việt

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Appearance

Tạo và Chạy Dự Án Vue.js với ServBay ​

Vue.js là một framework JavaScript tiên tiến, phổ biến để 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 năng cao, đặc biệt phù hợp cho các ứng dụng đơn trang (SPA). ServBay là môi trường phát triển web local mạnh mẽ, cung cấp hỗ trợ Node.js tiện lợi, tương thích với cả macOS và Windows, khiến nó trở thành nền tảng lý tưởng cho phát triển Vue.js.

Hướng dẫn này sẽ chỉ ra cách sử dụng môi trường tích hợp của ServBay để xây dựng một dự án Vue.js từ đầu, truy cập dự án ở cả chế độ phát triển và sản xuất qua ServBay.

Vue.js là gì? ​

Vue.js là framework JavaScript tiến tiến dùng để xây dựng giao diện người dùng. Khác với các framework lớn khác, Vue có thiết kế phát triển gia tăng từ dưới lên. Thư viện core của Vue chỉ tập trung vào tầng giao diện, giúp dễ làm quen và dễ dàng tích hợp với thư viện bên thứ ba hoặc các dự án hiện có. Vue 3 là phiên bản mới nhất với nhiều cải tiến đáng giá như hiệu năng nhanh hơn, kích thước nhỏ hơn và hỗ trợ TypeScript tốt hơn.

Các đặc điểm nổi bật và lợi ích của Vue 3 ​

  • Composition API: Tổ chức logic thông qua chức năng kết hợp, giúp mã của các component lớn dễ bảo trì và tái sử dụng hơn.
  • Cải thiện hiệu năng: Vue 3 sử dụng Proxy để tạo hệ thống phản ứng và tối ưu hóa thuật toán DOM ảo giúp tăng tốc độ đáng kể.
  • Kích thước nhỏ hơn: Nhận được lợi ích từ tree-shaking, thư viện core nhẹ và tải nhanh.
  • Hỗ trợ TypeScript tốt hơn: Loại dữ liệu được xác định chặt chẽ, cải thiện trải nghiệm khi phát triển ứng dụng Vue với TypeScript.
  • Vòng đời component cải tiến: Các hook vòng đời mới và hàm Setup giúp logic component rõ ràng và dễ quản lý hơn.

Sử dụng Vue 3 giúp lập trình viên xây dựng ứng dụng 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 với môi trường tích hợp ServBay ​

Bài viết này sẽ sử dụng môi trường Node.js của ServBay để khởi tạo và chạy một dự án Vue.js. Bạn sẽ sử dụng chức năng Website của ServBay để cấu hình máy chủ web, tận dụng proxy ngược và dịch vụ file tĩnh để truy cập local dễ dàng.

Yêu cầu trước khi bắt đầu ​

Hãy đảm bảo bạn đã hoàn tất những bước chuẩn bị sau:

  1. Cài đặt ServBay: Đã hoàn thành cài đặt ServBay trên máy tính.
  2. Cài đặt gói Node.js: Dùng chức năng quản lý gói phần mềm của ServBay, cài đặt Node.js. Tham khảo Sử dụng Node.js trong ServBay.

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

  1. Khởi tạo project

    Đầu tiên, mở ứng dụng Terminal của bạn. ServBay khuyên bạn lưu trữ website trong thư mục mặc định. Truy cập vào thư mục đó và dùng lệnh npm create vue@latest để khởi động một dự án Vue.js mới. @latest đảm bảo bạn dùng bản mới nhất của Vue CLI hoặc create-vue (thường là Vue 3).

    macOS:

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

    Windows:

    cmd
    cd C:\ServBay\www
npm create vue@latest

    Làm theo hướng dẫn trên Terminal nhập tên dự án (khuyên dùng servbay-vue-app), chọn các tính năng TypeScript, Vue Router, Pinia v.v. theo nhu cầu. Ví dụ cấu hình:

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

  2. Cài đặt dependency

    Sau khi khởi tạo, truy cập vào thư mục dự án servbay-vue-app và chạy lệnh sau để cài đặt các gói phụ thuộc:

    bash
    cd servbay-vue-app
npm install

Chỉnh sửa nội dung mẫu của dự án (tuỳ chọn) ​

Để kiểm tra dự án hoạt động thành công, bạn có thể mở file src/App.vue và thay nội dung mặc định bằng dòng chào "Hello ServBay!" đơn giản.

Mở file src/App.vue trong thư mục dự án và chỉnh lại:

html
<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>Đây là ứng dụng Vue.js đang chạy qua 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>

Thiết lập môi trường phát triển (dùng proxy ngược) ​

Khi phát triển, dự án Vue thường khởi động một server local (sử dụng Vite hoặc Webpack), cung cấp HMR (hot module reload) tiện lợi. ServBay có thể sử dụng proxy ngược để ánh xạ một tên miền local sang địa chỉ và port của server này.

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

    Trong thư mục gốc dự án, chạy lệnh sau để mở server phát triển. Sử dụng tham số --port (ví dụ: 8585), đảm bảo port này chưa bị phần mềm khác dùng.

    bash
    npm run dev -- --port 8585

    Terminal sẽ thông báo server đã khởi động, thường là http://localhost:8585.

  2. Cấu hình proxy ngược cho website trong ServBay

    Mở giao diện ứng dụng ServBay, vào phần Website. Thêm một website mới, chọn loại Proxy Ngược:

    • Tên: My first Vue dev site (hoặc tên dễ nhớ khác)
    • Tên miền: servbay-vue-dev.servbay.demo (hoặc tên miền .servbay.demo khác tùy chọn)
    • Loại website: Proxy ngược
    • IP đích: 127.0.0.1
    • Port đích: 8585 (trùng với port bạn sử dụng khi chạy server dev)

    Lưu lại, ServBay sẽ cập nhật cấu hình web server (Caddy hoặc Nginx), chuyển truy cập từ tên miền sang server local qua proxy ngược http://127.0.0.1:8585.

    Xem chi tiết cách cấu hình website Node.js cho dev tại Thêm website Node.js phát triển trong 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ào https://servbay-vue-dev.servbay.demo.

    ServBay hỗ trợ tự động cài SSL cho tên miền local (bằng ServBay User CA hoặc Public CA), bạn có thể truy cập HTTPS an toàn, mô phỏng môi trường production. Để biết thêm về SSL, xem tại Cấu hình SSL cho website trong ServBay.

    Giờ bạn đã có thể thấy ứng dụng Vue vận hành ở chế độ phát triển với khả năng hot reload khi chỉnh sửa mã.

Build và triển khai bản production (dùng dịch vụ file tĩnh) ​

Khi hoàn thiện dự án và muốn deploy, hãy build bản tối ưu để chạy production. Bản này chủ yếu là các file tĩnh (HTML, CSS, JS), có thể serve trực tiếp bằng chức năng website tĩnh của ServBay.

  1. Dựng bản production

    Tại thư mục gốc dự án, thực hiện:

    bash
    npm run build

    Quá trình này sẽ tạo ra tập hợp file tĩnh tối ưu nằm trong thư mục dist của dự án.

  2. Cấu hình dịch vụ file tĩnh

    Vào giao diện ServBay, đến phần Website. Thêm một website mới, chọn loại Tĩnh:

    • Tên: My first Vue production site (hoặc tên dễ nhớ khác)
    • Tên miền: servbay-vue-prod.servbay.demo (hoặc tên miền .servbay.demo tuỳ chọn)
    • Loại website: Tĩnh
    • Đường dẫn gốc website: Trỏ đến thư mục dist của dự án:
      • macOS: /Applications/ServBay/www/servbay-vue-app/dist
      • Windows: C:\ServBay\www\servbay-vue-app\dist

    Lưu lại cấu hình, ServBay sẽ serve trực tiếp các file tĩnh từ thư mục dist.

  3. Truy cập chế độ production

    Đảm bảo web server ServBay đang chạy. Mở trình duyệt, vào tên miền cho bản production https://servbay-vue-prod.servbay.demo.

    Bạn sẽ thấy phiên bản production của ứng dụng Vue đã được tối ưu cho tốc độ tải và hiệu năng. Cũng như khi phát triển, việc dùng tên miền custom và SSL tự động của ServBay giúp preview website production local một cách an toàn và thực tế.

Lưu ý quan trọng ​

  • Xung đột port: Nếu port bạn chọn (ví dụ: 8585 cho lệnh npm run dev) đã bị ứng dụng khác sử dụng, chạy lệnh sẽ báo lỗi. Hãy dùng port khác chưa bị chiếm và đảm bảo cập nhật cấu hình proxy trong ServBay tương ứng.
  • Trạng thái web server ServBay: Hãy chắc chắn web server (Caddy hoặc Nginx, tuỳ thiết lập) trong ServBay đang khởi động, nếu không tên miền sẽ không truy cập được.
  • Phân giải tên miền: ServBay tự động phân giải các tên miền dạng .servbay.demo về localhost (127.0.0.1) khi bạn thiết lập ở mục Website. Nếu dùng tên miền khác, bạn có thể cần sửa file hosts hệ thống hoặc sử dụng chức năng Hosts Manager của ServBay để đảm bảo phân giải đúng.

Tổng kết ​

ServBay giúp bạn dễ dàng tạo môi trường phát triển Node.js local trên cả macOS và Windows, quản lý dự án Vue.js từ phát triển đến triển khai production. Nhờ chức năng Website của ServBay, bạn có thể cấu hình proxy ngược để truy cập server dev, hoặc serve trực tiếp bản dựng tĩnh, tận hưởng tiện ích của tên miền tuỳ chỉnh và SSL tự động với hiệu quả và bảo mật cao. Việc thiết lập dự án Vue local trở nên đơn giản và tiện lợi hơn bao giờ hết.