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

• Sử dụng NPM 
• Sử dụng CLI 

Phương pháp 1: Cài đặt Vue.js bằng NPM 

Đối với các ứng dụng sản xuất quy mô lớn, việc cài đặt Vue.js thông qua NPM được ưa thích trên Ubuntu 22.04. Node.js và NPM là tiên quyết để cài đặt Vue.js.

Bước 1: Cài đặt Node.js 

Để cài đặt Node.js trên Ubuntu 22.04, mở terminal bằng phím tắt Ctrl + Alt + T và chạy lệnh sau đây:

$ sudo apt install nodejs

Nhập “y” để cho phép và tiếp tục quá trình cài đặt Node.js.

Node.js được cài đặt thành công trên Ubuntu 22.04. Nếu Node.js đã được cài đặt, hãy đơn giản là cài đặt bằng NPM.

Xác minh cài đặt Node.js Để xác minh phiên bản Node.js đã được cài đặt, chạy lệnh sau:

$ nodejs --version

Đã được xác minh rằng phiên bản Node.js đã được cài đặt là v12.22.9

Bước 2: Cài đặt NPM 

Để cài đặt NPM, chạy lệnh sau trong terminal:

$ sudo apt install npm

NPM được cài đặt thành công.

Xác minh cài đặt NPM Để xác minh phiên bản NPM đã được cài đặt, chạy lệnh sau:

$ npm --version

Phiên bản NPM đã được cài đặt là 8.5.1

Bước 3: Cài đặt Vue.js 

Để cài đặt phiên bản ổn định mới nhất của Vue.js trên Ubuntu 22.04 thông qua NPM, chạy lệnh sau:

$ npm install vue@next

Vue.js được cài đặt thành công trên Ubuntu 22.04.

Phương pháp 2: Cài đặt Vue.js bằng CLI 

CLI là gói đầy đủ được sử dụng để cài đặt Vue.js trên Ubuntu 22.04. Người dùng phải có kiến thức cơ bản về lập trình front-end và Node.js trước khi sử dụng phương pháp CLI để cài đặt Vue.js.

Để cài đặt phiên bản ổn định mới nhất của Vue.js trên Ubuntu 22.04 bằng Command Line Interface (CLI) của Vue, chạy lệnh sau trong terminal:

$ sudo npm install -g @vue/cli

Phiên bản ổn định của Vue.js được cài đặt thành công trên Ubuntu 22.04 bằng Vue CLI.

Cách xác minh phiên bản Vue.js đã cài đặt Để kiểm tra phiên bản Vue.js đã cài đặt trên Ubuntu, chạy lệnh sau trong terminal:

$ vue --version

Phiên bản Vue.js đã cài đặt là 5.0.8

Cách nâng cấp lên phiên bản ổn định của Vue.js Để nâng cấp lên phiên bản ổn định mới nhất của Vue.js trên Ubuntu 22.04, chạy lệnh sau:

$ sudo npm update -g @vue/cli

Làm thế nào để tạo một ứng dụng Vue.js? Có hai cách để tạo một ứng dụng Vue.js:

Thông qua CLI Thông qua GUI Tạo ứng dụng Vue.js bằng CLI Để bắt đầu Vue.js, tạo một ứng dụng demo bằng CLI bằng cách chạy lệnh sau:

$ vue create demo-app

Ở đây, “demo-app” là tên của ứng dụng. Bạn cũng có thể cung cấp tên theo ý thích của bạn.

Chọn một preset (Vue 3 là phiên bản mới nhất và được ưa thích):

Nó sẽ bắt đầu tạo và cài đặt ứng dụng cho bạn:

Dự án “demo-app” được tạo thành công.

Tạo ứng dụng Vue.js thông qua GUI Để bắt đầu Vue.js hoặc tạo ứng dụng demo thông qua phương pháp GUI, đơn giản chỉ cần chạy lệnh sau đây để mở cửa sổ trong trình duyệt:

# vue ui

Sau khi chạy lệnh trên terminal, mở liên kết được cung cấp trong trình duyệt và bạn sẽ có một trang web như hình dưới đây:

Nhấp vào tùy chọn trình đơn “Create” và từ phần xuất hiện, nhấp vào nút “Create a new Project here”:

Đặt tên dự án, quản lý gói và nhấp vào nút “Next”:

Cài đặt Preset (Vue 3 mặc định):

Nó sẽ bắt đầu tạo một dự án và hoàn thành sau một thời gian ngắn.

Dự án Vue được tạo thành công và bạn có thể bắt đầu mã hóa bằng cách vào thư mục dự án và mở các tệp liên quan.