Vue.js không hỗ trợ Internet Explorer 8 do phụ thuộc vào các tính năng của ECMAScript 5 — những tính năng không thể mô phỏng trên IE8.

Công cụ dòng lệnh @vue/cli giúp thiết lập và phát triển ứng dụng Vue một cách nhanh chóng, chuẩn hóa và linh hoạt. Nó tích hợp sẵn Webpack, Babel, ESLint, và nhiều loader/plugin cần thiết để xử lý mã nguồn hiện đại như ES6+, SFC (Single-File Components), CSS preprocessor, v.v.

1. Cài đặt Vue CLI

Cài đặt toàn cục một lần duy nhất:

npm install -g @vue/cli

Hoặc dùng Yarn:

yarn global add @vue/cli

2. Tạo dự án mới

vue create my-vue-app

3. Chọn cấu hình tùy chỉnh

Khi chạy lệnh trên, hệ thống sẽ hỏi bạn chọn cấu hình:

• Chọn "Manually select features" thay vì "Default (Vue 3)" hoặc "Default (Vue 2)" để kiểm soát chính xác các tính năng được kích hoạt.
• Sử dụng phím mũi tên để di chuyển và phím Space hoặc n để chọn/bỏ chọn các thành phần như:

• Babel: Dịch cú pháp ES6+ sang phiên bản tương thích với trình duyệt cũ.
• Router: Quản lý điều hướng giữa các trang (SPA).
• Vuex (hoặc Pinia nếu dùng Vue 3): Quản lý trạng thái ứng dụng tập trung.
• CSS Pre-processors (ví dụ: Sass, Less): Hỗ trợ viết CSS nâng cao.

Lựa chọn lưu cấu hình trong tệp package.json hoặc trong các tệp riêng biệt như babel.config.js, vue.config.js.

4. Khởi động máy chủ phát triển

Sau khi hoàn tất, hệ thống hiển thị các lệnh sau:

cd my-vue-app<br>npm run serve

Hoặc nếu dùng Yarn:

yarn serve

Mở trình duyệt và truy cập http://localhost:8080 để xem giao diện mặc định.

Cấu trúc cơ bản của một thành phần Vue (.vue)

Mỗi tệp .vue gồm ba khối chính:

• <template>: Định nghĩa cấu trúc DOM (phải có đúng **một root element**).
• <script>: Xử lý logic, khai báo dữ liệu, phương thức, lifecycle hooks… — thường xuất khẩu một đối tượng cấu hình Vue.
• <style>: Định nghĩa CSS cho thành phần (có thể dùng scoped để giới hạn phạm vi).

Đăng ký và sử dụng thành phần con

1. Nhập thành phần qua import:
2. Khởi tạo trong thuộc tính components của đối tượng cấu hình:
3. Sử dụng tên thẻ trong <template>.

import HeaderBar from './components/HeaderBar.vue'

export default {
  components: {
    HeaderBar  // viết gọn khi key === value
  }
}

Giới thiệu các tệp/tập tin quan trọng

main.js — Điểm vào ứng dụng

Tạo và gắn kết instance Vue vào DOM:

import { createApp } from 'vue'         // Vue 3
import App from './App.vue'
import router from './router'

createApp(App)
  .use(router)
  .mount('#app')

Lưu ý: Với Vue 2, cú pháp là new Vue({ render: h => h(App) }).$mount('#app').

App.vue — Thành phần gốc

Là thành phần đầu tiên được render, đóng vai trò làm "khung xương" cho toàn bộ ứng dụng — nơi chứa <router-view> hoặc các layout chung.

router/index.js

Định nghĩa các tuyến đường và ánh xạ chúng tới các thành phần tương ứng:

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

Các thư mục chính

• src/: Chứa mã nguồn — bao gồm thành phần, router, store, assets…
• src/assets/: Lưu trữ tài nguyên tĩnh như ảnh, font, icon…
• node_modules/: Thư viện phụ thuộc được cài đặt bởi npm/yarn.
• vue.config.js (tuỳ chọn): Tùy chỉnh cấu hình Webpack, alias, proxy…