Cách cài đặt Vue.JS trên Ubuntu 22.04

[theanh]

Vue.js là một khuôn khổ javascript được sử dụng để tạo giao diện người dùng tương tác và các ứng dụng một trang. Nó nhẹ hơn và thích ứng hơn khuôn khổ AngularJS. Nó đơn giản, linh hoạt, mô-đun, hiệu suất cao, dễ học và cung cấp nhiều công cụ và thư viện giúp phát triển ứng dụng dễ dàng. Nếu bạn biết HTML, CSS và JavaScript cơ bản, bạn có thể nhanh chóng bắt đầu xây dựng các ứng dụng web bằng Vue.js.

Hướng dẫn này sẽ chỉ cho bạn cách cài đặt Vue JS trên Ubuntu 22.04.

Điều kiện tiên quyết​

• Máy chủ chạy Ubuntu 22.04 cho HAProxy.
• Mật khẩu gốc được cấu hình trên tất cả các máy chủ.

Cài đặt Node.js​

Trước khi bắt đầu, bạn sẽ cần cài đặt Node.js trên máy chủ của mình. Theo mặc định, phiên bản mới nhất của Node.js không có trong kho lưu trữ mặc định của Ubuntu 22.04. Vì vậy, bạn sẽ cần cài đặt nó từ kho lưu trữ nguồn Node.

Đầu tiên, cài đặt các phụ thuộc cần thiết bằng lệnh sau:

apt install curl gnupg2 gnupg git wget -y

Tiếp theo, thêm kho lưu trữ nguồn Node bằng lệnh sau:

curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -

Sau khi kho lưu trữ được thêm vào, bạn có thể cài đặt Node.js bằng lệnh sau lệnh:

apt install nodejs -y

Sau khi Node.js được cài đặt, bạn có thể xác minh phiên bản Node.js bằng lệnh sau:

node --version

Bạn sẽ nhận được thông báo sau đầu ra:

v16.16.0

Bây giờ, hãy cập nhật NPM lên phiên bản mới nhất bằng lệnh sau:

npm install npm@latest -g

Bạn cũng có thể xác minh phiên bản NPM bằng lệnh sau lệnh:

npm --version

Bạn sẽ nhận được kết quả sau:

8.13.2

Cài đặt Vue CLI​

Bây giờ bạn có thể sử dụng NPM để cài đặt gói Vue CLI bằng cách sử dụng lệnh sau lệnh:

npm install -g @vue/cli

Sau khi Vue được cài đặt, bạn có thể xác minh phiên bản Vue JS bằng lệnh sau:

vue --version

Bạn sẽ thấy thông báo sau đầu ra:

@vue/cli 5.0.8

Tạo ứng dụng đơn giản bằng Vue JS​

Bây giờ bạn có thể sử dụng Vue CLI để tạo ứng dụng của mình một cách dễ dàng. Chạy lệnh sau để tạo một ứng dụng mẫu có tên là myapp.

vue create myapp

Bạn sẽ nhận được kết quả đầu ra sau:

Vue CLI v5.0.8
? Creating project in /root/myapp.
???? Initializing git repository...
?? Installing CLI plugins. This might take a while...
added 848 packages, and audited 849 packages in 24s
88 packages are looking for funding run `npm fund` for details
found 0 vulnerabilities
???? Invoking generators...
???? Installing additional dependencies...
added 95 packages, and audited 944 packages in 6s
98 packages are looking for funding run `npm fund` for details
found 0 vulnerabilities
? Running completion hooks...
???? Generating README.md...
???? Successfully created project myapp.
???? Get started with the following commands: $ cd myapp $ npm run serve WARN Skipped git commit due to missing username and email in git config, or failed to sign commit. You will need to perform the initial commit yourself.

Tiếp theo, hãy thay đổi thư mục thành myapp và liệt kê tất cả các tệp và thư mục đã cài đặt bằng lệnh sau lệnh:

cd myapp
ls

Bạn sẽ nhận được kết quả sau:

babel.config.js jsconfig.json node_modules package.json package-lock.json public README.md src vue.config.js

Khởi động ứng dụng Vue JS​

Bây giờ bạn có thể khởi động ứng dụng Vue JS của mình bằng cách chạy lệnh sau lệnh:

npm run serve

Sau khi ứng dụng được khởi động, bạn sẽ nhận được kết quả sau:

> [emailprotected] serve
> vue-cli-service serve INFO Starting development server... DONE Compiled successfully in 6469ms 8:45:33 AM App running at: - Local: http://localhost:8080/ - Network: unavailable Note that the development build is not optimized. To create a production build, run npm run build.

Truy cập Giao diện Web Vue JS​

Lúc này, ứng dụng Vue JS đã được cài đặt và lắng nghe trên cổng 8080. Bây giờ bạn có thể mở trình duyệt web và truy cập ứng dụng Vue JS bằng URL http://your-serevr-ip. Bạn sẽ thấy bảng điều khiển Vue JS trên trang sau:


data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22750%22%20height=%22449%22%3E%3C/svg%3E

Kết luận​

Trong bài đăng này, chúng tôi đã giải thích cách cài đặt Vue JS trên Ubuntu 22.04. Bây giờ bạn có thể bắt đầu xây dựng ứng dụng một trang của mình bằng cách sử dụng khung Vue JS. Hãy thoải mái hỏi tôi nếu bạn có bất kỳ câu hỏi nào.