Tạo và chạy dự án Vue.js

Vue.js là gì?

Vue.js là một framework JavaScript tiến bộ sử dụng để xây dựng các 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 cốt lõi của Vue chỉ tập trung vào layer giao diện, không chỉ dễ học mà còn dễ dàng tích hợp với các 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 của Vue.js, mang đến nhiều tính năng mới và cải tiến, bao gồm hiệu suất nhanh hơn, kích thước gói nhỏ hơn và hỗ trợ TypeScript tốt hơn.

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

• API Composition: Tổ chức mã logic thông qua chức năng kết hợp, làm cho mã dễ bảo trì và tái sử dụng hơn.
• Hiệu suất nhanh hơn: Vue 3 sử dụng đối tượng Proxy để thực hiện hệ thống phản ứng, hiệu suất được cải thiện đáng kể.
• Kích thước gói nhỏ hơn: Nhờ vào công nghệ Tree-shaking, kích thước gói của Vue 3 nhỏ hơn so với Vue 2.
• Hỗ trợ TypeScript tốt hơn: Vue 3 cung cấp định nghĩa kiểu TypeScript tốt hơn, cải thiện trải nghiệm phát triển.
• Vòng đời component được cải tiến: Các hook vòng đời mới giúp logic component rõ ràng hơn và dễ quản lý hơn.

Sử dụng Vue 3, có thể giúp các nhà phát triển xây dựng các ứng dụng Web hiện đại, phản hồi nhanh chóng một cách hiệu quả hơn.

Tạo và chạy dự án Vue 3 bằng ServBay

Trong bài viết này, chúng ta sẽ sử dụng môi trường Node.js do ServBay cung cấp để tạo và chạy một dự án Vue 3. Chúng ta sẽ sử dụng tính năng 'máy chủ' của ServBay để thiết lập máy chủ Web, và thông qua proxy ngược và dịch vụ file tĩnh để truy cập dự án.

Tạo dự án Vue 3

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

   Đầu tiên, đảm bảo bạn đã cài đặt môi trường Node.js do ServBay cung cấp. Sau đó, sử dụng lệnh sau để khởi tạo một dự án Vue 3 mới:

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

   Nhập tên dự án theo hướng dẫn (khuyến nghị đặt tên là servbay-vue-app) và chọn các tùy chọn khác tùy theo nhu cầu:

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No
   ✔ Add JSX Support? … No
   ✔ Add Vue Router for Single Page Application development? … Yes
   ✔ Add Pinia for state management? … No
   ✔ Add Vitest for Unit testing? … No
   ✔ Add an End-to-End Testing Solution? … No
   ✔ Add ESLint for code quality? … Yes
   ✔ Add Prettier for code formatting? … Yes
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No

2. Cài đặt các phụ thuộc

   Vào thư mục dự án và cài đặt các phụ thuộc:

   cd servbay-vue-app
   npm install

Thay đổi nội dung đầu ra của dự án Vue

1. Sửa file src/App.vue

   Mở file src/App.vue, sửa nội dung để trang web hiển thị "Hello ServBay!":

   <template>
     <div id="app">
       <h1>Hello ServBay!</h1>
     </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>

Vào chế độ phát triển

1. Chạy máy chủ phát triển

   Khởi động máy chủ phát triển và chỉ định cổng (ví dụ: 8585):

   npm run dev -- --port 8585

   Điều này sẽ khởi chạy một máy chủ phát triển cục bộ và mở cổng 8585.

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

   Sử dụng tính năng 'máy chủ' của ServBay thông qua proxy ngược để truy cập máy chủ phát triển. Trong cài đặt 'máy chủ' của ServBay thêm một proxy ngược mới:

   • Tên: My first Vue dev site
   • Tên miền: servbay-vue-test.dev
   • Loại máy chủ: Reverse Proxy
   • IP: 127.0.0.1
   • Cổng: 8585

   Các bước cài đặt chi tiết tham khảo tại thêm trang web phát triển Nodejs.

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

   Mở trình duyệt, truy cập https://servbay-vue-test.dev để xem dự án. Vì ServBay hỗ trợ tên miền tùy chỉnh và chứng chỉ SSL miễn phí, bạn sẽ có mức độ bảo mật cao hơn.

Xây dựng phiên bản sản phẩm

1. Xây dựng phiên bản sản phẩm

   Khi hoàn thành phát triển, sử dụng lệnh sau để xây dựng phiên bản sản phẩm:

   npm run build

   Sau khi xây dựng xong, các file tĩnh sẽ nằm trong thư mục dist.

2. Thiết lập dịch vụ file tĩnh

   Sử dụng tính năng 'máy chủ' của ServBay thông qua dịch vụ file tĩnh để truy cập phiên bản sản phẩm. Trong cài đặt 'máy chủ' của ServBay, thêm một trang web tĩnh mới:

   • Tên: My first Vue production site
   • Tên miền: servbay-vue-test.prod
   • Loại máy chủ: Static
   • Thư mục gốc của trang web: /Applications/ServBay/www/servbay-vue-app/dist

3. Truy cập chế độ sản phẩm

   Mở trình duyệt, truy cập https://servbay-vue-test.prod để xem phiên bản sản phẩm. Thông qua tên miền tùy chỉnh và chứng chỉ SSL miễn phí của ServBay, trang web của bạn sẽ có mức độ bảo mật và độ tin cậy cao hơn.

Bằng các bước trên, bạn đã tạo và chạy thành công một dự án Vue 3 và sử dụng các tính năng do ServBay cung cấp để quản lý và truy cập dự án của bạn.