使用 Vite 创建 Vue 3 项目并手动配置路由的完整步骤

1. 创建 Vue 3 项目

首先确保你已经安装了 Node.js（建议版本 16+）和 npm/yarn/pnpm。

# 使用 npm
npm create vite@latest vue3-vite-router -- --template vue# 或使用 yarn
yarn create vite vue3-vite-router --template vue# 或使用 pnpm
pnpm create vite vue3-vite-router --template vue

2. 进入项目目录并安装依赖

cd vue3-vite-router# 安装基础依赖
npm install
# 或 yarn
yarn
# 或 pnpm
pnpm install# 安装 vue-router
npm install vue-router@4
# 或
yarn add vue-router@4
# 或
pnpm add vue-router@4

3. 配置路由

3.1 创建路由文件结构

src/
├── router/
│   └── index.js
├── views/
│   ├── HomeView.vue
│   ├── AboutView.vue
│   └── NotFoundView.vue
├── App.vue
└── main.js

3.2 配置路由文件 (src/router/index.js)

import { createRouter, createWebHistory } from 'vue-router'// 导入视图组件
import HomeView from '../views/HomeView.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',// 路由懒加载component: () => import('../views/AboutView.vue')},{// 404 页面path: '/:pathMatch(.*)*',name: 'not-found',component: () => import('../views/NotFoundView.vue')}]
})export default router

3.3 修改 main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)app.use(router)app.mount('#app')

4. 创建视图组件

src/views/HomeView.vue

<template><div class="home"><h1>Home Page</h1><router-link to="/about">Go to About</router-link></div>
</template><script setup>
// 使用 script setup 语法
</script>

src/views/AboutView.vue

<template><div class="about"><h1>About Page</h1><router-link to="/">Go back Home</router-link></div>
</template><script setup>
</script>

src/views/NotFoundView.vue

<template><div class="not-found"><h1>404 - Page Not Found</h1><router-link to="/">Go back Home</router-link></div>
</template><script setup>
</script>

5. 修改 App.vue

<template><nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></nav><router-view />
</template><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-top: 60px;
}nav {padding: 30px;
}nav a {font-weight: bold;color: #2c3e50;margin: 0 10px;
}nav a.router-link-exact-active {color: #42b983;
}
</style>

6. 运行项目

npm run dev
# 或
yarn dev
# 或
pnpm dev

7. 可选的高级配置

动态路由

// 在 router/index.js 中添加
{path: '/user/:id',name: 'user',component: () => import('../views/UserView.vue')
}

路由守卫

// 在 router/index.js 中添加
router.beforeEach((to, from, next) => {document.title = to.meta.title || 'My Vue App'next()
})

嵌套路由

{path: '/dashboard',name: 'dashboard',component: () => import('../views/DashboardView.vue'),children: [{path: 'profile',component: () => import('../views/DashboardProfile.vue')},{path: 'settings',component: () => import('../views/DashboardSettings.vue')}]
}