Xây dựng dự án Vue 3

npm create vue@latest

Need to install the following packages:
create-vue@3.14.2
Ok to proceed? (y) y

> npx
> create-vue

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue-project
✔ Add TypeScript? … Yes
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … Yes
✔ Add Pinia for state management? … Yes
✔ Add Vitest for Unit Testing? … No
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? › Yes
✔ Add Prettier for code formatting? Yes

Scaffolding project in ./vue-project...

Done. Now run:
  cd vue-project
  npm install
  npm run format
  npm run dev

cd vue-project
npm install
npm run format
npm run dev

npm install axios

VUE_API_URL=https://dummyjson.com

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  envPrefix: 'VUE', // Thay đổi tiền tố mặc định từ VITE thành VUE
  plugins: [vue(), vueDevTools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

import axios from 'axios'

export const api = axios.create({
  baseURL: import.meta.env.VUE_API_URL,
  headers: {
    'Content-Type': 'application/json',
  },
})

export type Post = {
  id: number
  title: string
  body: string
  tags: string[]
  reactions: {
    likes: number
    dislikes: number
  }
  views: number
  userId: number
}

export interface Posts {
  posts: Post[]
  total: number
  skip: number
  limit: number
}

export type PostCreateRequest = {
  title: string
  body: string
  tags: string[]
}

export type PostUpdateRequest = {
  id: number
  title?: string
  body?: string
  tags?: string[]
}

import { api } from '@/services/api'
import type {
  Post,
  Posts,
  PostCreateRequest,
  PostUpdateRequest,
} from '@/models/post/type'

const resource = '/posts'

const getPosts = async () => {
  return await api.get<Posts>(resource)
}

const getPostById = async (id: number) => {
  return await api.get<Post>(`${resource}/${id}`)
}

const createPost = async (payload: PostCreateRequest) => {
  return await api.post<Post>(`${resource}/add`, payload)
}

const updatePost = async (payload: PostUpdateRequest) => {
  return await api.put<Post>(`${resource}/${payload.id}`, payload)
}

const deletePost = async (id: number) => {
  return await api.delete<Post>(`${resource}/${id}`)
}

export const postService = {
  getPosts,
  getPostById,
  createPost,
  updatePost,
  deletePost,
}

import { postService } from '@/services/post'

export const API = {
  post: postService,
}

import { ref } from 'vue'
import { defineStore } from 'pinia'
import { API } from '@/services'
import type { Posts } from '@/models/post/type'
import { isAxiosError } from 'axios'

export const usePostStore = defineStore('postStore', () => {
  const posts = ref<Posts>({
    posts: [],
    total: 0,
    skip: 0,
    limit: 0,
  })

  const initPosts = (newPosts: Posts): void => {
    posts.value = newPosts
  }

  const dispatchGetPosts = async (): Promise<void> => {
    try {
      const { data } = await API.post.getPosts()

      initPosts(data)
    } catch (error) {
      if (isAxiosError(error)) {
        switch (error.response?.status) {
          case 400:
            // 400 Bad Request
            break
          case 404:
            // 404 Not Found
            break
          case 500:
            // 500 Internal Server Error
            break
          default:
            // Other error
            break
        }
      }

      throw error
    }
  }

  return {
    posts,
    dispatchGetPosts,
  }
})

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { usePostStore } from '@/stores/post'
import type { Posts } from '@/models/post/type'

const postStore = usePostStore()
const listPosts = computed<Posts>(() => postStore.posts)
const loading = ref<boolean>(false)

onMounted(async () => {
  loading.value = true
  try {
    await postStore.dispatchGetPosts()
  } catch (error) {
    console.error('Error page:', error)
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <div>
    <h1>List Posts</h1>
    <p v-if="loading">Loading...</p>
    <div v-else>
      <ul v-if="listPosts.posts.length">
        <li v-for="post in listPosts.posts" :key="post.id">
          {{ post.title }}
        </li>
      </ul>
    </div>
  </div>
</template>

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    // ...
    {
      path: '/post',
      name: 'post',
      component: () => import('../views/post/PostsView.vue'),
    },
    // ...
  ],
})

export default router

vue-project/
│
├── .env                      # Các biến môi trường
├── src/
│   ├── models/
│   │   └── post/
│   │       └── type.ts       # Kiểu dữ liệu cho "post"
│   │
│   ├── services/
│   │   ├── api.ts            # Cấu hình instance Axios
│   │   ├── index.ts          # Tổng hợp các dịch vụ
│   │   └── post/
│   │       └── index.ts      # API endpoint cho "post"
│   │
│   ├── stores/
│   │   └── post/
│   │       └── index.ts      # Store quản lý "post"
│   │
│   ├── views/
│   │   └── PostView.vue      # Component hiển thị danh sách bài viết
│   │
│   └── router/
│       └── index.ts          # Cấu hình định tuyến
│
└── vite.config.ts            # Cấu hình Vite