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

Nuxt.js là gì?

Nuxt.js là một framework mã nguồn mở dựa trên Vue.js, dùng để xây dựng ứng dụng Vue.js render phía server. Nó cung cấp nhiều tính năng phong phú như render phía server (SSR), tạo site tĩnh (SSG), tự động chia nhỏ code, hệ thống định tuyến mạnh mẽ, giúp cho các nhà phát triển có thể xây dựng ứng dụng web hiện đại hiệu quả hơn.

Các đặc điểm và lợi thế chính của Nuxt.js

• Render phía server (SSR): Tăng tốc độ tải trang và hiệu năng SEO.
• Tạo site tĩnh (SSG): Hiển thị trước các trang tĩnh, cải thiện hiệu năng và trải nghiệm người dùng.
• Tự động chia nhỏ code: Chỉ tải mã JavaScript cần thiết cho trang hiện tại, tối ưu hóa hiệu năng.
• Định tuyến tích hợp sẵn: Định tuyến dựa trên hệ thống tập tin, không cần cấu hình thêm.
• Module hóa: Mở rộng tính năng qua module, dễ dàng tích hợp các thư viện và dịch vụ bên thứ ba.
• Hệ sinh thái mạnh mẽ: Nuxt.js có rất nhiều plugin và module hỗ trợ, giúp phát triển dễ dàng hơn.

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

Sử dụng ServBay để tạo và chạy dự án Nuxt.js

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

Tạo dự án Nuxt.js

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

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

   cd /Applications/ServBay/www
   npx create-nuxt-app servbay-nuxt-app

   Nhập tên dự án (gợi ý đặt tên là servbay-nuxt-app), và chọn các tùy chọn khác tùy theo nhu cầu:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm
   ? UI framework: None
   ? Nuxt.js modules: Axios
   ? Linting tools: ESLint
   ? Testing framework: None
   ? Rendering mode: Universal (SSR / SSG)
   ? Deployment target: Server (Node.js hosting)
   ? Development tools: jsconfig.json (Recommended for VS Code)

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-nuxt-app
   npm install

Chỉnh sửa nội dung xuất ra của dự án Nuxt.js

1. Chỉnh sửa file pages/index.vue

   Mở file pages/index.vue, chỉnh sửa nội dung để trang web hiển thị "Hello ServBay!":

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style>
   div {
     text-align: center;
     margin-top: 50px;
   }
   </style>

Chuyển sang 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 động 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 hosting

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

   • Tên: My first Nuxt.js dev site
   • Tên miền: servbay-nuxt-test.dev
   • Loại host: Reverse proxy
   • IP: 127.0.0.1
   • Cổng: 8585

   Các bước cài đặt chi tiết có thể 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-nuxt-test.dev, xem trực tiếp dự án. Nhờ ServBay hỗ trợ tên miền tùy chỉnh và chứng chỉ SSL miễn phí, bạn sẽ có được độ bảo mật cao hơn.

Xây dựng phiên bản sản xuất

1. Xây dựng phiên bản sản xuất

   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 xuất:

   npm run build
   npm run export

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

2. Cài đặt dịch vụ file tĩnh

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

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

3. Truy cập chế độ sản xuất

   Mở trình duyệt, truy cập https://servbay-nuxt-test.prod, xem phiên bản sản xuất đã xây dựng. Nhờ tên miền tùy chỉnh của ServBay và chứng chỉ SSL miễn phí, trang web của bạn sẽ có độ bảo mật và độ tín nhiệm cao hơn.

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