Khi làm việc với Vue 3, việc thiết lập môi trường phát triển là rất quan trọng. Dưới đây là hướng dẫn chi tiết về cách cấu hình một dự án Vue 3 từ đầu.

Webpack vs Vite: Hai cách tiếp cận khác nhau

• Webpack: Đóng gói toàn bộ mã nguồn trước, sau đó khởi động máy chủ phát triển. Khi truy cập, các tệp đã được đóng gói sẵn sẽ được gửi đến.
• Vite: Tận dụng ES Module gốc của trình duyệt, không cần đóng gói trước. Chỉ khi có yêu cầu đến một module cụ thể, Vite mới biên dịch module đó. Điều này giúp khởi động nhanh hơn.

Bắt đầu với Node.js

Tải và cài đặt Node.js từ trang chủ. Sau khi cài đặt, kiểm tra phiên bản:

node -v

Khởi tạo dự án npm

Sử dụng lệnh sau để tạo tệp package.json:

npm init
# hoặc
npm init -y  # Bỏ qua phần nhập liệu

Tệp package.json mẫu:

{
  "name": "testinit",
  "version": "0.1.0",
  "description": "Khởi tạo dự án npm",
  "main": "index.js",
  "scripts": {
    "dev": "node index"
  },
  "author": "",
  "license": "ISC",
  "keywords": []
}

• main: Tệp nhập chính của dự án.
• scripts: Định nghĩa các lệnh rút gọn, ví dụ npm run dev sẽ chạy node index.
• type: Cấu hình hỗ trợ CJS hoặc ESM.

CommonJS và ES Module

Node.js mặc định hỗ trợ CJS (CommonJS). ESModule (ESM) là chuẩn từ ES6, cần cấu hình trong package.json bằng "type": "module".

Cấu hình registry npm

Kiểm tra registry hiện tại:

npm config get registry
# Ví dụ kết quả: https://registry.npmmirror.com/

Thay đổi registry (ví dụ dùng mirror Trung Quốc):

npm config set registry https://registry.npmmirror.com/

Cài đặt package

Phân biệt dependency và devDependency

# Cài đặt dependency (môi trường chạy thực tế)
npm install --save  # hoặc npm install -S
# Kết quả: thêm vào dependencies

# Cài đặt devDependency (chỉ dùng khi phát triển)
npm install --save-dev  # hoặc npm install -D
# Kết quả: thêm vào devDependencies

Các lệnh khác

# Cài đặt global
npm install --global

# Cài đặt phiên bản cụ thể
npm install vue@2.6.14

# Cập nhật tất cả package
npm update

# Cập nhật package cụ thể
npm update vue

# Gỡ cài đặt local
npm uninstall vue

# Gỡ cài đặt global
npm uninstall

Tạo dự án Vue 3

Có nhiều cách để tạo dự án Vue 3.

Sử dụng Vite (khuyên dùng)

npm create vite
# Sau đó chọn Vue template

Sử dụng Vue CLI

# Cài đặt Vue CLI global
npm install -g @vue/cli

# Tạo dự án
vue create hello-vue3

Sau khi cài đặt Vue CLI, bạn có thể sử dụng giao diện đồ họa:

vue ui

Cấu trúc dự án

Sau khi tạo dự án, bạn sẽ thấy các thư mục và tệp như: src, public, package.json, tsconfig.json (nếu dùng TypeScript).

Công cụ hỗ trợ phát triển

Prettier - Định dạng code

Cài đặt Prettier và tạo tệp .prettierrc với cấu hình cơ bản:

{
  "semi": false,
  "singleQuote": true
}

ESLint - Kiểm tra code

Cấu hình ESLint trong tệp .eslintrc.js:

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    '@vue/standard',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

VS Code Extensions hữu ích

• Volar: Hỗ trợ Vue 3, TypeScript, và kiểm tra kiểu vue-tsc.
• Auto Close Tag: Tự động đóng thẻ HTML.
• Auto Rename Tag: Đổi tên thẻ đóng/mở đồng bộ.
• EditorConfig for VS Code: Đảm bảo style code thống nhất.
• Prettier for VS Code: Tích hợp Prettier.
• ESLint for VS Code: Tích hợp ESLint.