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
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:
bashcd /Applications/ServBay/www npx create-nuxt-app servbay-nuxt-app
1
2Nhậ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:bash? 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)
1
2
3
4
5
6
7
8
9
10Cài đặt các phụ thuộc
Vào thư mục dự án và cài đặt các phụ thuộc:
bashcd servbay-nuxt-app npm install
1
2
Chỉnh sửa nội dung xuất ra của dự án Nuxt.js
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!":html<template> <div> <h1>Hello ServBay!</h1> </div> </template> <script> export default { name: 'IndexPage' } </script> <style> div { text-align: center; margin-top: 50px; } </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Chuyển sang chế độ phát triển
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):
bashnpm run dev -- --port 8585
1Đ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.
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.
- Tên:
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
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:
bashnpm run build npm run export
1
2Sau khi xây dựng xong, các file tĩnh sẽ nằm trong thư mục
dist
.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
- Tên:
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.