Để bắt đầu làm việc với Vue.js, trước tiên bạn cần cài đặt Node.js đi kèm với npm (Node Package Manager). Truy cập trang chủ Node.js để tải phiên bản phù hợp với hệ điều hành của bạn.

Sau khi cài đặt xong, mở command prompt và kiểm tra phiên bản bằng lệnh node -v để đảm bảo cài đặt thành công.

Cấu hình vị trí lưu trữ cache và module toàn cục cho npm giúp quản lý dung lượng đĩa hiệu quả hơn. Thực hiện các lệnh sau:

npm config set cache "D:\NodeJS\cache"
npm config set prefix "D:\NodeJS\global"

Để tăng tốc độ tải package khi ở Việt Nam, bạn nên cấu hình sử dụng npm mirror trong nước:

//Sử dụng npm mirror Trung Quốc
npm config set registry https://registry.npm.taobao.org

//Hoặc cài đặt cnpm để thay thế
npm install cnpm -g --registry=https://registry.npm.taobao.org

//Chọn một trong hai cách trên

Kiểm tra cấu hình npm đã thiết lập:

npm config ls

Thêm đường dẫn thư mục global vào biến môi trường hệ thống:

D:\NodeJS\global

Phương pháp 1: Cài đặt thủ công

Cài đặt Vue.js thông qua npm:

npm install vue

Khởi tạo file package.json:

npm init -y

Thêm các dependency cần thiết vào phần dependencies:

"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vue-template-compiler": "^2.6.14",
"@vue/cli-service": "^4.5.15"

Thêm các script vào phần scripts:

"serve": "vue-cli-service serve",
"build": "vue-cli-service build"

Cài đặt tất cả dependencies:

npm install

Tạo cấu trúc thư mục với thư mục src/ ở thư mục gốc. Tạo file main.js với nội dung sau:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

import Home from './pages/home/Home.vue';
import About from './pages/about/About.vue';

Vue.config.productionTip = false;

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

new Vue({
  render: h => h(App),
  router
}).$mount('#app');

Tạo file App.vue trong thư mục src/:

<template>
    <div>
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
    name: 'App'
}
</script>

<style>
</style>

Tạo thư mục pages/home/ và file Home.vue:

<template>
    <div>
        <button @click="navigateToAbout">Chuyển trang</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                message: 'Trang chủ'
            };
        },
        mounted() {
            setTimeout(() => {
                this.navigateToAbout();
            }, 3000);
        },
        methods: {
            navigateToAbout() {
                this.$router.push('/about');
            }
        }
    }
</script>

<style>
</style>

Tạo thư mục pages/about/ và file About.vue:

<template>
    <div>Đây là trang giới thiệu</div>
</template>

<script>
export default {
    name: 'About'
}
</script>

<style>
</style>

Cấu trúc cơ bản đã hoàn thiện. Lưu ý rằng nếu bạn cần xây dựng ứng dụng phức tạp, nên sử dụng công cụ tạo dự án Vue CLI có sẵn.

Phương pháp 2: Sử dụng Vue CLI

Cài đặt Vue CLI toàn cục:

npm install -g @vue/cli

Cách 1: Tạo dự án qua dòng lệnh

Tạo dự án mới (lưu ý tên dự án không được viết hoa):

vue create my-vue-project

Sau khi chạy lệnh, bạn sẽ được chọn cấu hình preset hoặc thiết lập thủ công theo nhu cầu.

Cách 2: Sử dụng giao diện đồ họa

Mở giao diện quản lý Vue:

vue ui

Trình duyệt mặc định sẽ mở giao diện cài đặt trực quan. Theo hướng dẫn trên màn hình để cài đặt các dependency cần thiết.

Chạy ứng dụng

Để khởi động môi trường phát triển:

npm run serve

Để đóng gói ứng dụng cho môi trường sản phẩm:

npm run build