파일 구조에 따른 Vue 자동 라우팅

VueJS로 작업할 때 내 문제 중 하나는 특히 프로젝트가 점점 커지고 Route.ts 또는 Route.js를 유지하는 데 문제가 되는 경우 경로를 생성할 때입니다. 페이지가 너무 많아서 새 페이지를 만들 때 경로를 업데이트해야 하고 오류 표시를 피하기 위해 페이지를 삭제할 때마다 경로 파일을 업데이트해야 하는 프로젝트가 아직도 기억납니다.

그래서 파일 기반을 사용하여 자동 라우팅을 만드는 방법을 찾기 시작했습니다. 인터넷에서 찾은 결과의 대부분은 대부분 webpack과 버전 2에 대한 것이기 때문에 Google에서 검색하려고 하면 찾기가 어려웠습니다. 그래서 Vue Github repo 토론에서 질문해야 답변을 받았습니다.

Unplugin Vue Router를 소개합니다. 이는 Vue 3용 형식화된 파일 기반 라우팅입니다. 실제로 설정도 쉽습니다. 이는 Github readme 파일에 명시된 대로 실험적입니다.

먼저 Vue 프로젝트를 처음부터 만들어 보겠습니다. 우리 모두 알고 있듯이 이 명령을 실행하여 프로젝트를 생성한 다음 몇 가지 옵션에 응답할 수 있습니다. 수행 방법이 익숙하지 않은 경우 VueJs 페이지에서 빠른 시작을 확인하세요.

pnpm create vue@latest

이 예에서는 이것이 제가 프로젝트를 생성한 방법입니다.

pnpm create vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-auto-route
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes

Scaffolding project in D:\Projects\Testing\vue-auto-route...

Done. Now run:

  cd vue-auto-route
  pnpm install
  pnpm dev

Select TypeScript를 사용하겠습니다. 또한 페이지가 자동으로 재생성되도록 라우터를 활성화했습니다.

우리 프로젝트에 CD를 넣고 종속성을 설치합니다. 따라서 사용한 패키지 관리자에 따라 사용할 수 있습니다. 저는 pnpm을 사용하고 있는데 마음에 들기 시작했습니다. 이제 프로젝트가 생성되면 unplugin-vue-router를 설치해야 합니다.

pnpm add -D unplugin-vue-router

이제 vite.config.ts를 업데이트해 보겠습니다. 플러그인을 인덱스 0에 넣어야 합니다.

import { fileURLToPath, URL } from "node:url";
import VueRouter from "unplugin-vue-router/vite";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        VueRouter({
            /* options */
        }),
        // ⚠️ Vue must be placed after VueRouter()
        vue(),
    ],
    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
        },
    },

});

다음에는 편집자가 패키지 유형을 쉽게 찾을 수 있도록 env.d.ts를 업데이트하겠습니다.

/// <reference types="vite/client" />
/// <reference types="unplugin-vue-router/client" />

그런 다음 src/router/index.ts에서 라우터 index.ts를 업데이트하겠습니다.

import { createRouter, createWebHistory } from "vue-router";
import { routes, handleHotUpdate } from "vue-router/auto-routes";

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes,
});

if (import.meta.hot) {
    handleHotUpdate(router);
}

export default router;

이제 모든 작업이 완료되었으므로 src/pages 디렉터리를 만들 수 있습니다. 이 폴더 또는 디렉터리에 페이지를 추가하고 파일 구조에 따라 경로가 자동으로 생성됩니다. Nuxt에 익숙하신 분이라면 비슷하실 겁니다.

srcpagesabout.vue에 About 페이지를 생성해 보겠습니다.

<template>
    <div>This is the about page</div>
</template>

srcpagesindex.vue의 index를 이용하여 홈페이지를 만들어 보겠습니다.

<template>
    <div>This is Home Page</div>
</template>

그런 다음 개발 스크립트를 실행하여 vue 앱을 실행할 수 있습니다. pnpm 개발자. 홈을 클릭하면 홈 페이지로 리디렉션되고, 정보를 클릭하면 정보 페이지로 리디렉션됩니다.

이제 모든 것이 준비되었습니다. 라우터 폴더 구조에 익숙하지 않은 경우. 이 문서는 https://uvr.esm.is/guide/file-based-routing.html에서 확인할 수 있습니다.

이 콘텐츠에 src/pages/blog/[id].vue와 같은 슬러그 컴포넌트를 추가해 보겠습니다.

<script setup>
const { id } = useRoute().params;
</script>
<template>
    <div>This is the blog post with id: {{ id }}</div>
</template>

이제 pnpm dev를 다시 실행해 보겠습니다. 그리고 http://localhost:5173/blog/6으로 이동하면 이 메시지가 표시됩니다.

놀랍죠? 이 짧은 블로그가 귀하의 VueJS 여정에 도움이 되었기를 바랍니다. 좋은 하루 보내세요.

이 글이 마음에 드시고 응원의 마음을 표현하고 싶으시면 커피 한 잔 사주시면 됩니다. 귀하의 기여에 진심으로 감사드립니다!

---

이 글이 마음에 드시고 응원의 마음을 표현하고 싶으시면 커피 한 잔 사주시면 됩니다. 귀하의 기여에 진심으로 감사드립니다!

위 내용은 파일 구조에 따른 Vue 자동 라우팅의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!