Xây dựng ứng dụng Vue.js: CLI, Webpack và Vue Router

Vue CLI

Vue CLI là một công cụ dòng lệnh mạnh mẽ giúp bạn khởi tạo và quản lý các dự án Vue.js một cách nhanh chóng. Nó cung cấp một cấu trúc thư mục chuẩn, môi trường phát triển cục bộ, khả năng hot-reloading, hỗ trợ kiểm thử đơn vị và các tùy chỉnh cho việc đóng gói ứng dụng.

Cài đặt Vue CLI

Để cài đặt Vue CLI, bạn cần đảm bảo đã cài đặt Node.js (phiên bản 8.x trở lên được khuyến nghị) và Git trên hệ thống của mình. Sau đó, chạy lệnh sau trong terminal:

npm install -g @vue/cli

Để xác minh việc cài đặt, bạn có thể chạy:

vue --version

Khởi tạo dự án mới

Có hai cách chính để tạo một dự án Vue mới bằng Vue CLI:

  1. Sử dụng giao diện dòng lệnh tương tác: 
    vue create ten_du_an_cua_ban

    Công cụ sẽ hướng dẫn bạn qua các tùy chọn cấu hình dự án, bao gồm tên, mô tả, tác giả, chế độ build Vue, tích hợp Vue Router, ESLint để kiểm tra mã nguồn, và thiết lập kiểm thử đơn vị hoặc kiểm thử end-to-end.

  2. Sử dụng template có sẵn (ví dụ: webpack): 
    vue init webpack ten_du_an_cua_ban

    Tương tự như cách trên, bạn sẽ được hỏi các câu hỏi để tùy chỉnh dự án. Chọn "yes" để tự động cài đặt các gói npm cần thiết sau khi dự án được tạo.

Chạy dự án

Sau khi tạo dự án, di chuyển vào thư mục dự án và chạy các lệnh sau:

cd ten_du_an_cua_ban
npm install
npm run serve

Bạn cũng có thể sử dụng các IDE như WebStorm để tạo dự án Vue mới bằng cách chọn tùy chọn "Vue.js" khi tạo dự án.

Cấu trúc thư mục cơ bản

  • node_modules/: Chứa tất cả các gói phụ thuộc của dự án.
  • src/: Thư mục chứa mã nguồn chính của ứng dụng.
  • package.json: Tệp cấu hình dự án, liệt kê các dependencies và scripts.
  • main.js: Tệp điểm vào chính của ứng dụng Vue.

Webpack

Webpack là một trình đóng gói module (module bundler) mạnh mẽ, chủ yếu dùng để chuyển đổi mã nguồn JavaScript hiện đại (ES6+) thành các phiên bản tương thích với các trình duyệt cũ hơn (ES5). Nó cũng có thể xử lý các loại tài nguyên khác như CSS, hình ảnh, v.v.

Cài đặt Webpack

Bạn có thể cài đặt Webpack và Webpack CLI toàn cục hoặc cục bộ cho từng dự án:

npm install -g webpack webpack-cli

Sử dụng Webpack

Trong thư mục dự án, bạn chỉ cần chạy lệnh webpack để thực hiện quá trình đóng gói. Tham số --watch cho phép Webpack tự động theo dõi các thay đổi và đóng gói lại khi có sự chỉnh sửa.

Cấu hình Webpack

Đối với các phiên bản Vue CLI mới, thư mục build/ có thể không còn tồn tại. Để tùy chỉnh cấu hình Webpack, bạn cần tạo một tệp vue.config.js ở thư mục gốc của dự án và định nghĩa các cài đặt mong muốn trong đó.

Vue Router

Vue Router là trình quản lý định tuyến chính thức của Vue.js, cho phép bạn xây dựng các ứng dụng một trang (SPA) với khả năng điều hướng mượt mà giữa các thành phần. Các tính năng nổi bật bao gồm:

  • Định tuyến lồng nhau (nested routes) và các chế độ xem lồng nhau.
  • Cấu hình định tuyến dựa trên thành phần và có tính module hóa.
  • Hỗ trợ tham số đường dẫn, tham số truy vấn và các ký tự đại diện.
  • Hiệu ứng chuyển đổi giữa các chế độ xem dựa trên hệ thống transition của Vue.js.
  • Kiểm soát điều hướng chi tiết.
  • Tự động thêm lớp CSS cho các liên kết đang hoạt động.
  • Chế độ lịch sử HTML5 hoặc chế độ hash (tự động hạ cấp cho IE9).
  • Hành vi cuộn trang tùy chỉnh.

Cài đặt Vue Router

Trong thư mục dự án, chạy lệnh sau:

npm install vue-router --save-dev

Sau khi cài đặt, bạn sẽ thấy vue-router xuất hiện trong phần devDependencies của package.json và các tệp tương ứng trong thư mục node_modules.

Cấu hình và sử dụng

1. Tạo thành phần nội dung

Tạo một tệp mới, ví dụ src/components/Content.vue, để làm trang đích cho việc điều hướng:

<template>
    <div>Đây là trang nội dung</div>
</template>
<script>
    export default {
        name: "ContentPage"
    }
</script>
<style scoped>
    /* Các style riêng cho component */
</style>

2. Định nghĩa các tuyến đường (routes)

Tạo thư mục src/router và trong đó có tệp index.js để định nghĩa các tuyến đường:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Content from '@/components/Content.vue' // Sử dụng alias @ cho thư mục src

Vue.use(VueRouter)

const routes = [
    {
        path: '/noi-dung', // Đường dẫn URL
        name: 'ContentRoute', // Tên của tuyến đường
        component: Content // Thành phần sẽ được hiển thị
    }
]

const router = new VueRouter({
    routes,
    mode: 'history' // Sử dụng chế độ history để có URL đẹp hơn
})

export default router

3. Đăng ký Vue Router vào ứng dụng

Trong tệp src/main.js, nhập và sử dụng đối tượng router đã tạo:

import Vue from 'vue'
import App from './App.vue'
import router from './router' // Import đối tượng router

Vue.config.productionTip = false

new Vue({
  router, // Đưa router vào instance Vue
  render: h => h(App),
}).$mount('#app')

4. Sử dụng trong thành phần chính (App.vue)

Trong tệp src/App.vue, sử dụng các thẻ router-link để tạo liên kết điều hướng và router-view để hiển thị thành phần tương ứng với tuyến đường hiện tại:

<template>
    <div id="app">
        <nav>
            <router-link to="/noi-dung">Đi tới trang nội dung</router-link>
        </nav>
        <router-view></router-view> <!-- Nơi các thành phần tuyến đường sẽ được render -->
    </div>
</template>
<script>
    export default {
        name: 'App'
    }
</script>
<style>
    /* CSS cho App */
</style>

Khi bạn nhấp vào liên kết "Đi tới trang nội dung", thành phần Content.vue sẽ được hiển thị bên trong thẻ router-view.

Thẻ: Vue.js vue-cli Webpack vue-router JavaScript

Đăng vào ngày 28 tháng 7 lúc 13:00

Thẻ Phổ Biến

©2026 Thành phố Cuồng loạn