Hướng Dẫn Nhanh {#quick-start}

🚀 Bắt đầu với Vue chỉ trong vài phút! Dưới đây là các cách nhanh nhất để bạn trải nghiệm sức mạnh của Vue.js.

Trải Nghiệm Vue Trực Tuyến {#try-vue-online}

🎯 Playground Chính Thức

• Vue Playground
  – Môi trường tương tác trực tuyến hoàn hảo nhất:
  https://play.vuejs.org

💡 Lưu ý: Đây là công cụ chính thức của Vue team, hoàn hảo để:

– Thử nghiệm code ngay lập tức
– Học cú pháp Vue mà không cần cài đặt
– Chia sẻ code với người khác

⚡ HTML Thuần Không Build

• JSFiddle Starter
  – Cho những ai muốn bắt đầu đơn giản:
  https://jsfiddle.net/yyx990803/2ke1ab0z/

🎯 Điểm mạnh:
– Không cần hiểu về build tools
– Phù hợp cho demo nhỏ và học tập
– Chạy trực tiếp trên trình duyệt

🔧 Môi Trường Build Đầy Đủ

• StackBlitz
  – Trải nghiệm development environment thực tế:
  https://vite.new/vue

⚠️ Chú ý: Phù hợp nếu bạn đã quen với:

– Node.js và npm
– Build tools như Vite
– Development workflow chuyên nghiệp

📝 Hướng Dẫn Tương Tác

• Scrimba Tutorial
  – Học bằng video tương tác:
  http://scrimba.com/links/vue-quickstart

💡 Lưu ý: Đặc biệt hữu ích cho người mới:

– Xem video và code cùng lúc
– Chỉnh sửa code ngay trong video
– Hiểu toàn bộ workflow từ A-Z

🎯 Tóm Tắt Lựa Chọn Cho Bạn:

| Nhu Cầu | Nền Tảng Khuyến Nghị | Độ Khó | |———|———————|———| | 🚀 Thử nghiệm nhanh | Vue Playground | ⭐☆☆☆☆ | | 📚 Học cơ bản | JSFiddle | ⭐⭐☆☆☆ | | 💻 Development thực tế | StackBlitz | ⭐⭐⭐⭐☆ | | 🎓 Học tương tác | Scrimba | ⭐⭐⭐☆☆ |

💻 Pro Tip: Nếu bạn là developer tại Việt Nam, hãy bắt đầu với Vue Playground để làm quen, sau đó chuyển sang StackBlitz khi đã sẵn sàng cho dự án thực tế!

👉 Sẵn sàng chưa? Chọn một platform phù hợp và bắt đầu coding ngay thôi!

Khởi Đầu Nhanh với Vue.js 🚀

Tạo Ứng Dụng Vue {#creating-a-vue-application}

💡 Lưu ý: Trước khi bắt đầu, hãy đảm bảo bạn có:

– Hiểu biết cơ bản về command line (terminal/cmd)
– Đã cài đặt Node.js phiên bản 18.3 trở lên

Giới thiệu nhanh

Trong phần này, chúng ta sẽ học cách tạo một ứng dụng Vue Single Page Application ngay trên máy tính của bạn.
Dự án được tạo ra sẽ sử dụng Vite
– công cụ build siêu nhanh và cho phép chúng ta sử dụng Single-File Components (SFCs) của Vue.

🎯 Điểm mấu chốt:
– Vite:
Công cụ build frontend cực nhanh
– SFC:
Mỗi component Vue được viết trong 1 file .vue duy nhất
– SPA:
Ứng dụng web tải 1 trang HTML duy nhất

Bắt đầu tạo dự án

⚠️ Chú ý: Đảm bảo bạn đã cài Node.js phiên bản mới nhất và đang ở thư mục muốn tạo dự án.

Chạy một trong các lệnh sau trong terminal (không cần gõ ký tự $):

:::
code-group

“`sh [npm] $ npm create vue@latest

```sh [pnpm] $ pnpm create vue@latest 

“`sh [yarn]

Cho Yarn (v1+)

$ yarn create vue

Cho Yarn Modern (v2+)

$ yarn create vue@latest

Cho Yarn ^v4.11

$ yarn dlx create-vue@latest

```sh [bun] $ bun create vue@latest 

:::

💡 Lựa chọn package manager:
– npm:
Mặc định, có sẵn với Node.js
– yarn:
Nhanh hơn, quản lý dependency tốt hơn
– pnpm:
Tiết kiệm dung lượng, hiệu suất cao
– bun:
Siêu nhanh, tương thích tốt với Node.js

Cấu hình dự án

Lệnh trên sẽ cài đặt và chạy create-vue
– công cụ chính thức để tạo dự án Vue.
Bạn sẽ thấy các tùy chọn cấu hình:

✔ Project name:
…
<your-project-name> ✔ Add TypeScript?
…
No / Yes ✔ Add JSX Support?
…
No / Yes ✔ Add Vue Router for Single Page Application development?
…
No / Yes ✔ Add Pinia for state management?
…
No / Yes ✔ Add Vitest for Unit testing?
…
No / Yes ✔ Add an End-to-End Testing Solution?
…
No / Cypress / Nightwatch / Playwright ✔ Add ESLint for code quality?
…
No / Yes ✔ Add Prettier for code formatting?
…
No / Yes ✔ Add Vue DevTools 7 extension for debugging?
(experimental) …
No / Yes Scaffolding project in ./<your-project-name>... Done.

💡 Giải thích các tùy chọn quan trọng:
– TypeScript:
Thêm kiểu dữ liệu tĩnh, phù hợp cho dự án lớn
– Vue Router:
Quản lý routing cho SPA
– Pinia:
Quản lý state (thay thế Vuex)
– ESLint:
Kiểm tra chất lượng code
– Prettier:
Tự động format code

Nếu bạn không chắc về tùy chọn nào, cứ chọn No bằng cách nhấn Enter.
Sau khi tạo xong dự án, làm theo hướng dẫn để cài đặt dependencies và chạy server development:

:::
code-group

“`sh-vue [npm] $ cd {{‘‘}} $ npm install $ npm run dev

```sh-vue [pnpm] $ cd {{'<your-project-name>'}} $ pnpm install $ pnpm run dev 

“`sh-vue [yarn] $ cd {{‘‘}} $ yarn $ yarn dev

```sh-vue [bun] $ cd {{'<your-project-name>'}} $ bun install $ bun run dev 

:::

🎉 Chúc mừng!
Bạn đã có dự án Vue đầu tiên!

Ứng dụng của bạn đang chạy!
Lưu ý rằng các component mẫu trong dự án được tạo sử dụng Composition API và <script setup>, thay vì Options API.

📝 Mẹo hữu ích cho developer Việt Nam:

• IDE khuyến nghị:
  Visual Studio Code + Vue
  – Official extension
• Công cụ phổ biến tại Việt Nam:
  VS Code, WebStorm, Sublime Text
• Extension hữu ích:
  Vue Volar, ESLint, Prettier, Auto Rename Tag

💻 Tài nguyên bổ sung:
– Chi tiết về tooling:
Tooling Guide
– Tìm hiểu Vite:
Vite docs
– Hướng dẫn TypeScript:
TypeScript Usage Guide

Build cho production

Khi bạn sẵn sàng deploy ứng dụng lên production, chạy lệnh:

:::
code-group

“`sh [npm] $ npm run build

```sh [pnpm] $ pnpm run build 

“`sh [yarn] $ yarn build

```sh [bun] $ bun run build 

:::

Lệnh này sẽ tạo bản build sẵn sàng cho production trong thư mục ./dist.
Xem thêm tại Production Deployment Guide để học cách deploy ứng dụng.

⚡ Ví dụ thực tế cho team Việt Nam:
– Deploy lên Vercel, Netlify (miễn phí cho dự án nhỏ)
– Hosting Việt Nam:
Hostinger, Mắt Bão, PA Vietnam
– CI/CD:
GitHub Actions, GitLab CI

Bước Tiếp Theo >

Hướng Dẫn Bắt Đầu Nhanh với Vue.js 🚀

Sử Dụng Vue Từ CDN {#using-vue-from-cdn}

Bạn có thể sử dụng Vue trực tiếp từ CDN thông qua thẻ script:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 

💡 Lưu ý: Ở đây chúng ta dùng unpkg, nhưng bạn cũng có thể sử dụng bất kỳ CDN nào cung cấp các gói npm, ví dụ như jsdelivr hoặc cdnjs.
Tất nhiên, bạn cũng có thể tải file này về và tự host.

🎯 Điểm mấu chốt: Khi sử dụng Vue từ CDN, không có bước “build” nào cả.
Điều này làm cho việc thiết lập đơn giản hơn rất nhiều, và phù hợp để tăng cường HTML tĩnh hoặc tích hợp với framework backend.
Tuy nhiên, bạn sẽ không thể sử dụng cú pháp Single-File Component (SFC).

Sử Dụng Global Build {#using-the-global-build}

Link ở trên tải global build của Vue, nơi tất cả các API cấp cao nhất được hiển thị dưới dạng thuộc tính trên đối tượng global Vue.
Đây là ví dụ đầy đủ sử dụng global build:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app">{{ message }}</div> <script> const { createApp } = Vue createApp({ data() { return { message: 'Hello Vue!' } } }).mount('#app') </script> 

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app">{{ message }}</div> <script> const { createApp, ref } = Vue createApp({ setup() { const message = ref('Hello vue!') return { message } } }).mount('#app') </script> 

💡 Lưu ý: Nhiều ví dụ về Composition API trong hướng dẫn sẽ sử dụng cú pháp <script setup>, yêu cầu công cụ build.
Nếu bạn định sử dụng Composition API mà không có bước build, hãy tham khảo cách sử dụng tùy chọn setup().

Sử Dụng ES Module Build {#using-the-es-module-build}

Trong phần còn lại của tài liệu, chúng ta sẽ chủ yếu sử dụng cú pháp ES modules.
Hầu hết các trình duyệt hiện đại đều hỗ trợ ES modules, vì vậy chúng ta có thể sử dụng Vue từ CDN thông qua ES modules như sau:

</div> <div class="composition-api"> ```html{3,4} <div id="app">{{ message }}</div> <script type="module"> import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' createApp({ setup() { const message = ref('Hello Vue!') return { message } } }).mount('#app') </script> 

🎯 Điểm quan trọng: Chúng ta đang sử dụng <script type="module">, và URL CDN được import trỏ đến ES modules build của Vue thay vì global build.

Bật Import Maps {#enabling-import-maps}

Trong ví dụ trên, chúng ta import từ URL CDN đầy đủ, nhưng trong phần còn lại của tài liệu, bạn sẽ thấy code như thế này:

import { createApp } from 'vue' 

Chúng ta có thể hướng dẫn trình duyệt tìm vị trí import vue bằng cách sử dụng Import Maps:

[CodePen Demo >](https://codepen.io/vuejs-examples/pen/wvQKQyM) </div> <div class="composition-api"> ```html{1-7,12} <script type="importmap"> { "imports": { "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js" } } </script> <div id="app">{{ message }}</div> <script type="module"> import { createApp, ref } from 'vue' createApp({ setup() { const message = ref('Hello Vue!') return { message } } }).mount('#app') </script> 

Bạn cũng có thể thêm các mục cho các dependency khác vào import map
– nhưng hãy đảm bảo chúng trỏ đến phiên bản ES modules của thư viện bạn định sử dụng.

💡 Hỗ trợ trình duyệt cho Import Maps: Import Maps là một tính năng trình duyệt tương đối mới.
Hãy đảm bảo sử dụng trình duyệt trong phạm vi hỗ trợ.
Đặc biệt, nó chỉ được hỗ trợ trong Safari 16.4+.

⚠️ Lưu ý về sử dụng Production: Các ví dụ cho đến nay đang sử dụng development build của Vue
– nếu bạn định sử dụng Vue từ CDN trong production, hãy đảm bảo kiểm tra Hướng dẫn Triển khai Production.

Mặc dù có thể sử dụng Vue mà không có hệ thống build, một cách tiếp cận thay thế để xem xét là sử dụng vuejs/petite-vue có thể phù hợp hơn với ngữ cảnh mà jquery/jquery (trong quá khứ) hoặc alpinejs/alpine (hiện tại) có thể được sử dụng thay thế.

Tách Các Module {#splitting-up-the-modules}

Khi chúng ta đi sâu hơn vào hướng dẫn, chúng ta có thể cần tách code của mình thành các file JavaScript riêng biệt để dễ quản lý hơn.
Ví dụ:

“`html [index.html]

<div class="options-api"> ```js [my-component.js] export default { data() { return { count: 0 } }, template: `<div>Count is: {{ count }}</div>` } 

</div> ⚠️ **Vấn đề thực tế:** Nếu bạn mở trực tiếp `index.html` trên trong trình duyệt, bạn sẽ thấy nó báo lỗi vì ES modules không thể hoạt động qua giao thức `file://`, đây là giao thức trình duyệt sử dụng khi bạn mở file local. 🔒 **Lý do bảo mật:** ES modules chỉ có thể hoạt động qua giao thức `http://`, đây là giao thức trình duyệt sử dụng khi mở các trang web. Để ES modules hoạt động trên máy local của chúng ta, chúng ta cần phục vụ `index.html` qua giao thức `http://`, với một HTTP server local. ### Khởi Chạy HTTP Server Local 🛠️ Để khởi chạy một HTTP server local, trước tiên hãy đảm bảo bạn đã cài đặt [Node.js](https://nodejs.org/en/), sau đó chạy `npx serve` từ command line trong cùng thư mục với file HTML của bạn. Bạn cũng có thể sử dụng bất kỳ HTTP server nào khác có thể phục vụ các file tĩnh với các MIME types chính xác. 💡 **Mẹo cho VS Code:** Bạn có thể nhận thấy rằng template của component được import được viết dưới dạng chuỗi JavaScript. Nếu bạn đang sử dụng VS Code, bạn có thể cài đặt extension [es6-string-html](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html) và thêm comment `/*html*/` trước chuỗi để có syntax highlighting cho chúng. ```js template: /*html*/ `<div>Count is: {{ count }}</div>`