🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

---
footer: false
---

<script setup>
import { VTCodeGroup, VTCodeGroupTab } from '@vue/theme'
</script>

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

🚀 Khởi đầu với Vue.js chưa bao giờ dễ dàng đến thế! Dưới đây là các cách nhanh nhất để trải nghiệm Vue ngay lập tức.

## Trải Nghiệm Vue Online {#try-vue-online}

💻 Bạn có thể dùng thử Vue trực tiếp mà không cần cài đặt qua các nền tảng sau:

- [Playground Vue chính thức](https://play.vuejs.org/#eNo9jcEKwjAMhl/lt5fpQYfXUQfefAMvvRQbddC1pUuHUPrudg4HIcmXjyRZXEM4zYlEJ+T0iEPgXjn6BB8Zhp46WUZWDjCa9f6w9kAkTtH9CRinV4fmRtZ63H20Ztesqiylphqy3R5UYBqD1UyVAPk+9zkvV1CKbCv9poMLiTEfR2/IXpSoXomqZLtti/IFwVtA9A==) - Môi trường tương tác trực quan nhất
- [JSFiddle](https://jsfiddle.net/yyx990803/2ke1ab0z/) - Phiên bản HTML thuần không cần build (phù hợp cho người mới)
- [StackBlitz](https://vite.new/vue) - Hỗ trợ build tools ngay trên trình duyệt (dành cho bạn đã biết Node.js)

💡 **Lưu ý:** Nếu bạn chưa rõ về build tools, hãy bắt đầu với Playground hoặc JSFiddle trước!

🎯 **Điểm mỗi:** Đừng ngại thử sửa code trong các ví dụ mẫu - cách học tốt nhất là thực hành!

⚡ **Bonus:** Xem [hướng dẫn tương tác trên Scrimba](http://scrimba.com/links/vue-quickstart) để được dẫn từng bước cách chạy, chỉnh sửa và triển khai ứng dụng Vue đầu tiên.

### Gợi ý cho Developer Việt Nam:
- Nếu cần hỗ trợ tiếng Việt, tham gia ngay [Cộng đồng Vue Việt Nam](https://vuejs.vn)
- Các ví dụ đều chạy online nên phù hợp cả khi dùng mạng VNPT, FPT, Viettel
- Có thể dùng kết hợp với các editor phổ biến như VS Code (cài extension Volar để hỗ trợ Vue tốt hơn)

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

🚀 **Khởi đầu nhanh với Vue.js - Hướng dẫn từng bước cho người mới!**

:::tip 💡 **Điều kiện tiên quyết**
- Hiểu cơ bản về command line (terminal)
- Cài đặt [Node.js](https://nodejs.org/) phiên bản 18.3 trở lên (khuyến nghị dùng bản LTS mới nhất)
:::

Trong phần này, chúng ta sẽ học cách tạo một [Single Page Application](/guide/extras/ways-of-using-vue#single-page-application-spa) bằng Vue ngay trên máy tính cá nhân. Dự án sẽ sử dụng [Vite](https://vitejs.dev) làm công cụ build và hỗ trợ [Single-File Components](/guide/scaling-up/sfc) (SFCs) - file `.vue`.

🎯 **Điểm mỗi:**  
Hãy đảm bảo bạn đã:
1. Cài Node.js phiên bản mới nhất
2. Mở terminal tại thư mục muốn tạo project

### 🛠️ Bắt đầu tạo project

Chạy 1 trong các lệnh sau (bỏ qua ký tự `$`):

::: code-group
```sh [npm]
$ npm create vue@latest

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

```sh [yarn]
# Yarn (v1+)
$ yarn create vue

# Yarn Modern (v2+)
$ yarn create vue@latest

# Yarn ^v4.11
$ yarn dlx create-vue@latest

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

:::

💡 **Giải thích:**  
Lệnh này sẽ cài đặt [create-vue](https://github.com/vuejs/create-vue) - công cụ chính thức để khởi tạo dự án Vue. Bạn sẽ thấy các tùy chọn như:

<div class="language-sh"><pre><code><span style="color:var(--vt-c-green);">✔</span> <span style="color:#A6ACCD;">Tên dự án: <span style="color:#888;">… <span style="color:#89DDFF;">&lt;</span><span style="color:#888;">tên-dự án</span><span style="color:#89DDFF;">&gt;</span></span></span>
<span style="color:var(--vt-c-green);">✔</span> <span style="color:#A6ACCD;">Thêm TypeScript? <span style="color:#888;">… <span style="color:#89DDFF;text-decoration:underline">Không</span> / Có</span></span>
<span style="color:var(--vt-c-green);">✔</span> <span style="color:#A6ACCD;">Hỗ trợ JSX? <span style="color:#888;">… <span style="color:#89DDFF;text-decoration:underline">Không</span> / Có</span></span>
<span style="color:var(--vt-c-green);">✔</span> <span style="color:#A6ACCD;">Thêm Vue Router? <span style="color:#888;">… <span style="color:#89DDFF;text-decoration:underline">Không</span> / Có</span></span>
<span style="color:var(--vt-c-green);">✔</span> <span style="color:#A6ACCD;">Thêm Pinia quản lý state? <span style="color:#888;">… <span style="color:#89DDFF;text-decoration:underline">Không</span> / Có</span></span>
<span style="color:var(--vt-c-green);">✔</span> <span style="color:#A6ACCD;">Thêm Vitest cho Unit test? <span style="color:#888;">… <span style="color:#89DDFF;text-decoration:underline">Không</span> / Có</span></span>
<span style="color:var(--vt-c-green);">✔</span> <span style="color:#A6ACCD;">Thêm End-to-End Testing? <span style="color:#888;">… <span style="color:#89DDFF;text-decoration:underline">Không</span> / Cypress / Nightwatch / Playwright</span></span>
<span style="color:var(--vt-c-green);">✔</span> <span style="color:#A6ACCD;">Thêm ESLint kiểm tra code? <span style="color:#888;">… Không / <span style="color:#89DDFF;text-decoration:underline">Có</span></span></span>
<span style="color:var(--vt-c-green);">✔</span> <span style="color:#A6ACCD;">Thêm Prettier format code? <span style="color:#888;">… <span style="color:#89DDFF;text-decoration:underline">Không</span> / Có</span></span>
<span style="color:var(--vt-c-green);">✔</span> <span style="color:#A6ACCD;">Thêm Vue DevTools 7? (thử nghiệm) <span style="color:#888;">… <span style="color:#89DDFF;text-decoration:underline">Không</span> / Có</span></span>
<span></span>
<span style="color:#A6ACCD;">Đang tạo dự án trong ./<span style="color:#89DDFF;">&lt;</span><span style="color:#888;">tên-dự án</span><span style="color:#89DDFF;">&gt;</span>...</span>
<span style="color:#A6ACCD;">Hoàn tất.</span></code></pre></div>

⚠️ **Lưu ý:**  
Nếu chưa rõ về tùy chọn nào, cứ chọn "Không" (nhấn Enter). Bạn luôn có thể thêm sau!

### 🚀 Chạy dự án

Sau khi tạo xong, làm theo các bước sau:

::: code-group
```sh [npm]
$ cd <tên-dự án>
$ npm install
$ npm run dev

“`sh [pnpm] $ cd $ pnpm install $ pnpm run dev

```sh [yarn]
$ cd <tên-dự án>
$ yarn
$ yarn dev

“`sh [bun] $ cd $ bun install $ bun run dev

:::

🎉 **Xin chúc mừng!** Bạn đã có dự án Vue đầu tiên chạy thành công!

💡 **Mẹo hay:**
- Các component mẫu sử dụng [Composition API](/guide/introduction#composition-api) và `<script setup>`
- IDE khuyên dùng: [VS Code](https://code.visualstudio.com/) + [Vue - Official extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
- Xem thêm về [hỗ trợ IDE](/guide/scaling-up/tooling#ide-support) nếu dùng editor khác

### 📦 Build sản phẩm

Khi sẵn sàng deploy, chạy lệnh build:

::: code-group
```sh [npm]
$ npm run build

“`sh [pnpm] $ pnpm run build

```sh [yarn]
$ yarn build

“`sh [bun] $ bun run build

:::

File build sẽ nằm trong thư mục `./dist`. Tham khảo thêm tại [Hướng dẫn Deploy](/guide/best-practices/production-deployment).

🔜 **Bước tiếp theo:** [Tìm hiểu sâu hơn >](#next-steps)

🚀 Sử Dụng Vue Từ CDN (Hướng Dẫn Cấp Tốc)

💻 Cách Nhúng Vue Từ CDN Đơn Giản

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>

🎯 Điểm mỗi:
– Ở đây chúng ta dùng unpkg, nhưng bạn có thể dùng bất kỳ CDN nào hỗ trợ npm packages như jsdelivr hoặc cdnjs
– Bạn cũng có thể tải file về và tự host nếu muốn

💡 Lưu ý:
– Khi dùng Vue từ CDN, không cần bước “build” phức tạp
– Cách này phù hợp để tích hợp vào HTML tĩnh hoặc các framework backend
– ⚠️ Hạn chế: Không thể sử dụng cú pháp Single-File Component (SFC)

🌍 Sử Dụng Global Build

Link trên tải bản global build của Vue, nơi tất cả API được expose qua object global Vue.
Ví dụ đầy đủ:

🛠️ Options API

<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: 'Xin chào Vue!'
      }
    }
  }).mount('#app')
</script>

Demo trên CodePen >

⚡ Composition API

<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('Xin chào Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Demo trên CodePen >

💡 Lưu ý:
– Nhiều ví dụ Composition API sử dụng <script setup> syntax (cần build tools) - Nếu dùng Composition API không qua build, tham khảo cách dùng [setup()` option](/api/composition-api-setup)

📦 Sử Dụng ES Module Build

Phần lớn tài liệu sẽ sử dụng cú pháp ES modules.
Hầu hết trình duyệt hiện đại đều hỗ trợ ES modules:

🛠️ Options API

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Xin chào Vue!'
      }
    }
  }).mount('#app')
</script>

⚡ Composition API

<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('Xin chào Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

🎯 Điểm khác biệt:
– Sử dụng <script type="module">
– Import từ bản ES modules build của Vue

🗺️ Bật Import Maps

Thay vì import từ URL dài, bạn có thể dùng Import Maps:

<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 } from 'vue' // Ngắn gọn hơn!

  createApp({
    data() {
      return {
        message: 'Xin chào Vue!'
      }
    }
  }).mount('#app')
</script>

⚠️ Chú ý:
– Import Maps là tính năng tương đối mới, chỉ hỗ trợ trên các trình duyệt hiện đại
– Safari cần phiên bản 16.4+ mới hỗ trợ

🏗️ Chia Nhỏ Modules

Khi ứng dụng phức tạp, bạn nên chia code thành các file riêng:

“`html [index.html]

### 🛠️ Options API
```js [my-component.js]
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>Đếm: {{ count }}</div>`
}

⚡ Composition API

js [my-component.js] import { ref } from 'vue' export default { setup() { const count = ref(0) return { count } }, template: `<div>Đếm: {{ count }}</div>` }

💡 Mẹo VS Code:
– Cài extension es6-string-html
– Thêm comment /*html*/ để bật syntax highlighting cho template string

⚠️ Lưu ý quan trọng:
– ES modules không chạy trên giao thức file://
– Cần chạy local server (dùng npx serve nếu có Node.js)
– Hoặc dùng bất kỳ HTTP server nào hỗ trợ static files

🚀 Lời Khuyên Cho Production

💡 Nếu dùng Vue từ CDN trong production:
1. Đảm bảo sử dụng bản production (không phải bản development)
2. Tham khảo Hướng dẫn Triển Khai Production

⚡ Gợi ý khác:
– Cân nhắc dùng petite-vue cho các dự án nhẹ
– Phù hợp khi cần thay thế jQuery hoặc Alpine.js

Bước Tiếp Theo {#next-steps}

🚀 Nếu bạn đã bỏ qua phần Giới thiệu, chúng tôi khuyến khích bạn nên đọc trước khi bắt đầu với phần tài liệu này.
Điều này sẽ giúp bạn nắm được tổng quan và tận dụng tối đa framework!

💡 Lưu ý: Đây là các lựa chọn tiếp theo được thiết kế phù hợp với từng phong cách học tập khác nhau:

Tiếp tục với Hướng dẫn Chi tiết

Khám phá mọi khía cạnh của framework với giải thích tỉ mỉ từng bước.


Thử Ngay với Tutorial

Dành cho những bạn thích học qua thực hành (learn-by-doing).


Xem Các Ví dụ Mẫu

Học nhanh qua các ví dụ thực tế về tính năng cốt lõi và xử lý giao diện.

🎯 Điểm mỗi:
– Bạn là người mới?
→ Bắt đầu với Hướng dẫn Chi tiết
– Ưa thích thực hành?
→ Nhảy ngay vào Tutorial
– Cần giải pháp nhanh?
→ Tra cứu Ví dụ Mẫu

⚡ Mẹo nhỏ: Kết hợp cả 3 cách trên sẽ giúp bạn hiểu sâu và nhớ lâu hơn!
Hãy thử nghiệm ngay với dự án cá nhân của bạn.

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM