Tiếp tục series về Vue3.js. Trong bài viết này, chúng ta sẽ cùng đi qua quy trình xây dựng một ứng dụng cơ bản với Vue 3 – từ khởi tạo project đến tạo component, quản lý trạng thái và xử lý routing.
1. Chuẩn Bị Môi Trường
Yêu cầu:
- Node.js >= 16.x
- Trình quản lý gói: npm hoặc yarn
Cài đặt Vue CLI hoặc Vite (đề xuất dùng Vite):
npm create vite@latest my-vue3-app -- --template vue
cd my-vue3-app
npm install
npm run dev
2. Cấu Trúc Dự Án Cơ Bản
my-vue3-app/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ ├── views/
│ ├── App.vue
│ ├── main.js
└── index.html
- App.vue: Component gốc
- main.js: Điểm khởi đầu ứng dụng
- components: Các component tái sử dụng
- views: Các trang lớn (khi có routing)
3. Tạo Component Với Composition API
<!-- src/components/Counter.vue -->
<template> <div> <h2>Số lần: {{ count }}</h2> <button @click="increment">Tăng</button> </div>
</template> <script setup>
import { ref } from 'vue' const count = ref(0)
const increment = () => { count.value++
}
</script>
Sử dụngscript setup giúp viết component ngắn gọn và rõ ràng hơn rất nhiều.
4. Thêm Vue Router
Cài đặt:
npm install vue-router@4
Tạo file router:
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue' const routes = [ { path: '/', component: Home }, { path: '/about', component: About }
] const router = createRouter({ history: createWebHistory(), routes
}) export default router
Khai báo router trong main.js:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' createApp(App).use(router).mount('#app')
5. Quản Lý Trạng Thái Với Pinia
Pinia là thư viện quản lý trạng thái hiện đại, thay thế Vuex trong Vue 3.
Cài đặt:
npm install pinia
Khởi tạo store:
// src/stores/counter.js
import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } }
})
Sử dụng trong component:
<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script> <template> <button @click="counter.increment">Count: {{ counter.count }}</button>
</template>
6. Styling và UI Framework
Vue 3 tương thích tốt với các UI framework như:
- Tailwind CSS (hiệu quả, tiện lợi)
- Element Plus
- Naive UI
- Vuetify 3
Ở đây, mình sẽ dùng Tailwind Css
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Thêm vào tailwind.config.js và main.css như hướng dẫn tại https://tailwindcss.com.
7. Build & Triển Khai
npm run build
Kết Luận
Vue 3 cùng với hệ sinh thái Vite, Pinia và Router tạo nên một môi trường phát triển frontend mạnh mẽ, hiện đại và dễ mở rộng. Bằng cách sử dụng Composition API, bạn có thể tổ chức logic một cách rõ ràng, dễ test và tái sử dụng.