Vue.js

Appearance

On this page

Bắt Đầu Nhanh ​

Thử Vue Trực Tuyến ​

  • Để nhanh chóng trải nghiệm Vue, bạn có thể thử ngay tại Playground.

  • Nếu bạn muốn sử dụng cài đặt HTML đơn giản mà không có bất kỳ bước xây dựng nào, bạn có thể sử dụng JSFiddle này làm điểm xuất phát.

  • Nếu bạn đã quen với Node.js và khái niệm về công cụ xây dựng, bạn cũng có thể thử một cài đặt xây dựng hoàn chỉnh ngay trong trình duyệt của bạn trên StackBlitz.

Tạo Ứng Dụng Vue ​

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

  • Hiểu biết về dòng lệnh
  • Cài đặt Node.js phiên bản 18.0 hoặc cao hơn

Trong phần này, chúng ta sẽ giới thiệu cách tạo Single Page Application Vue trên máy tính cá nhân của bạn. Dự án đã tạo sẽ sử dụng cài đặt xây dựng dựa trên Vite và cho phép chúng ta sử dụng Single-File Components (SFCs) của Vue.

Đảm bảo bạn đã cài đặt phiên bản Node.js mới nhất và thư mục làm việc hiện tại là thư mục bạn muốn tạo dự án. Chạy lệnh sau trong dòng lệnh của bạn (không có ký tự $):

npm
pnpm
yarn
bun
sh
$ npm create vue@latest

Lệnh này sẽ cài đặt và thực thi create-vue, công cụ cấu trúc dự án chính thức của Vue. Bạn sẽ được yêu cầu chọn một số tính năng tùy chọn như TypeScript và hỗ trợ kiểm thử:

✔ 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 / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

Nếu bạn không chắc chắn về một tùy chọn nào đó, đơn giản chọn No bằng cách nhấn enter. Khi dự án được tạo, làm theo hướng dẫn để cài đặt các phụ thuộc và khởi động máy chủ phát triển:

npm
pnpm
yarn
bun
sh
$ cd <tên-dự-án-của-bạn>
$ npm install
$ npm run dev

Bây giờ bạn nên có dự án Vue đầu tiên của mình đang chạy! Lưu ý rằng các thành phần ví dụ trong dự án được tạo có chứa Composition API và <script setup>, thay vì Options API. Dưới đây là một số mẹo thêm:

Khi bạn đã sẵn sàng triển khai ứng dụng của mình vào sản xuất, chạy lệnh sau:

npm
pnpm
yarn
bun
sh
$ npm run build

Dưới đây là bản dịch của đoạn văn bạn đã cung cấp, và phần code sẽ được giữ nguyên:

Điều này sẽ tạo ra một phiên bản xây dựng sẵn sàng cho sản xuất của ứng dụng của bạn trong thư mục ./dist của dự án. Xem Hướng Dẫn Triển Khai Sản Phẩm để biết thêm thông tin về cách triển khai ứng dụng của bạn vào môi trường sản xuất.

Tiếp Theo >

Sử Dụng Vue từ CDN ​

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

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

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

Khi sử dụng Vue từ một CDN, không có "bước xây dựng" nào được thực hiện. Điều này làm cho quá trình cài đặt đơn giản hơn nhiều và phù hợp để tăng cường HTML tĩnh hoặc tích hợp với một 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 ​

Liên kết ở trên tải global build của Vue, nơi tất cả các API cấp độ cao được tiết lộ như các thuộc tính trên đối tượng Vue toàn cầu. Dưới đây là một ví dụ đầy đủ sử dụng global build:

html
<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 Codepen

html
<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 Codepen

TIP

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ụ xây dựng. Nếu bạn dự định sử dụng Composition API mà không có bước xây dựng, hãy tham khảo cách sử dụng tùy chọn setup().

Sử Dụng ES Module Build ​

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

html
<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>
html
<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>

Lưu ý rằng chúng ta đang sử dụng <script type="module">, và URL CDN đã nhập đang trỏ đến ES modules build của Vue.

Demo Codepen

Demo Codepen

Kích Hoạt Import Maps ​

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

js
import { createApp } from 'vue'

Chúng ta có thể dạy trình duyệt cách định vị vue import bằng cách sử dụng Import Maps:

html
<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'

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

Demo Codepen

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

Demo Codepen

Bạn cũng có thể thêm các mục khác cho các phụ thuộc khác vào bản đồ nhập - 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 Import Maps

Import Maps là một tính năng trình duyệt tương đối mới. Đả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+.

Ghi chú về Việc Sử Dụng Trong Sản Xuất

Các ví dụ cho đến nay đang sử dụng bản phát triển của Vue - nếu bạn dự định sử dụng Vue từ CDN trong sản xuất, hãy đảm bảo kiểm tra Hướng Dẫn Triển Khai Sản Phẩm.

Phân Tách Các Mô-đun ​

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

html
<!-- index.html -->
<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>
js
// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>Đếm là {{ count }}</div>`
}
js
// my-component.js
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>Đếm là {{ count }}</div>`
}

Nếu bạn mở trực tiếp tệp index.html trên trình duyệt của bạn, bạn sẽ thấy rằng nó sẽ gây ra 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ở một tệp cục bộ.

Vì lý do an ninh, ES modules chỉ có thể hoạt động qua giao thức http://, đó là gì mà trình duyệt sử dụng khi mở trang web. Để ES modules hoạt động trên máy tính cục bộ của chúng ta, chúng ta cần phải phục vụ index.html qua giao thức http://, với một máy chủ HTTP cục bộ.

Để bắt đầu một máy chủ HTTP cục bộ, đầu tiên đảm bảo bạn đã cài đặt Node.js, sau đó chạy npx serve từ dòng lệnh trong thư mục chứa tệp HTML của bạn. Bạn cũng có thể sử dụng bất kỳ máy chủ HTTP khác có thể phục vụ tệp tĩnh với các loại MIME đúng.