- vừa được xem lúc

Khởi động cùng Vue: 1. Tạo dự án Vue.js mới bằng Vite

0 0 11

Người đăng: Luc

Theo Viblo Asia

1. Vue.js là gì?

Các bạn có thể gọi tắt là Vue. Vue.js là một framework Javascript được tạo ra bởi Evan You, giúp hỗ trợ xây dựng giao diện người dùng cũng như xây dựng Single Page Application thân thiện với người dùng. VueJS được nhiều lập trình viên đánh giá là framework hàng đầu trong xây dựng, phát triển giao diện người dùng (UI). Khác với các framework nguyên khối (monolithic), Vue được thiết kế từ đầu theo hướng cho phép và khuyến khích việc phát triển ứng dụng theo từng bước. Khi phát triển lớp giao diện (view layer), người dùng chỉ cần dùng thư viện lõi (core library) của Vue, vốn rất dễ học và tích hợp với các thư viện hoặc dự án có sẵn

2. Vite là gì?

Vite là một công cụ xây dựng front-end thế hệ tiếp theo, được tạo ra bởi Evan You, người đã tạo ra Vue. Ban đầu dành riêng cho VueJS, Vite mở rộng hỗ trợ cả React và một số thư viện front-end khác. Nó cung cấp trải nghiệm phát triển nhanh hơn và gọn gàng hơn cho các dự án web hiện tại. Đặc biệt Vite có hỗ trợ các iến thể của JS và CSS như:

  • Typescript, JSX(JavaScript XML)
  • SCSS, LESS,...

3. Cài đặt Vite như thế nào?

Các bạn có thể sử dụng npm hoặc yarm để cài đặt. Ở đây tớ dùng npm và sử dụng Visual Studio Code Sử dụng lệnh sau để cài đặt Vite

npm install -g @vitejs/create

4. Tạo dự án Vue với Vite

Đầu tiên các bạn cần mở terminal ở thứ mục bạn muốn tạo dự án Vue. Ở đây mình mở tại thư mục D:\code\vue-demo Tiếp theo các bạn sử dụng npm để khởi tạo Vite

npm create vite@latest

image.png Các bạn tiếp tục nhập tên dự án mà mình muốn khởi tạo. Ở đây mình sử dụng tên hello-vite image.png Ở đây các bạn có thể sử dụng rất nhiều các framework khác nhau. Chúng ta có thể sử dụng các phím mũi tên(up/down) để di chuyển giữa các lựa chọn và Enter để chọn. Như tiêu đề bài viết chúng ta sẽ chọn Vue image.png Sau đó chúng ta sẽ chọn variant (mình cũng không chắc đoạn này nên dịch như nào cho sát nghĩa. Nếu mọi người có góp ý xin hay bổ sung giúp mình vào phần bình luận ạ). Tại đây mình sẽ chọn JavaScript chon đơn giản 🥉 image.png Việc chúng ta bây giờ chỉ là chờ đợi thôi image.png Chúng ta chạy lần lượt các lệnh như trong terminal đã gợi ý Di chuyển vào thư mục vừa khởi tạo với lệnh

cd hello-vite

Cài đặt các thư viện với lệnh

npm install

Sau đấy chúng ta chỉ cần chạy sever dev thôi

npm run dev

image.png Như vậy chúng ta đã có thể chạy dự án Vue tại đường dẫn http://localhost:5173/ Và đây chính là kết quả của chúng ta image.png

5. Tổng kết

Như vậy chúng ta đã có thể tạo một dự án Vue một cách đơn giản và nhanh chóng với npmvite. Cảm ơn mọi người đã bỏ thời gian để đọc. Nếu có góp ý, chỉnh sửa mọi người có thể thêm vào phần bình luận mình sẽ lắng nghe góp ý của mọi người và chỉnh sửa. Xin chân thành cảm ơn.

Bài viết được sử dụng nguồn từ:

Bình luận

Bài viết tương tự

- vừa được xem lúc

Uống Pepsi code Vue đi - Uống Cocacola code React nha ;)

. (Nguồn ảnh: Internet). Chào các bạn, chào các bạn. Let's go . 1.

0 0 146

- vừa được xem lúc

Giới thiệu về Mixins trong Vuejs

Xin chào năm mới năm me! Hôm nay mình sẽ tiếp tục chia sẻ cho các bạn những vấn đề liên quan đến Vuejs. Ở bài trước mình đã giới thiệu về tính năng Filter và lần này, mình xin chia sẻ với các bạn về một khái niệm cũng rất quen thuộc.

0 0 394

- vừa được xem lúc

[Vue3] Tích hợp Vue I18n đơn giản, siêu nhẹ cho các dự án Vue3

Tại sao mình quyết định viết một plugin i18n cho dự án mới. . Lightweight. Chỉ có các feature thật sự cần thiết.

0 0 42

- vừa được xem lúc

Xây dựng chức năng quản lý sản phẩm với Vue + Laravel (Phần 2)

Video được đăng tại channel SUNTECH VIỆT NAM

0 0 22

- vừa được xem lúc

Vue Instance Lifecycle

Chào các bạn. 1.

0 0 83

- vừa được xem lúc

10 Vue Tips

Đôi khi để nghiên cứu một ngôn ngữ nào đó chúng ta phải đọc hàng tá trang docs thì mới moi được cái ý mình cần. Dạo này mình cũng lang thang đọc sang chút Vue chen chân nghề nghiệp nên cũng có lượm lặ

0 0 35