使用Vite工具创建项目，并使用Vue Router步骤

步骤 1: 安装 Vite

首先，确保你的电脑上已经安装了Node.js和npm。然后，通过以下命令全局安装Vite（如果已经安装，请跳过此步骤）：

npm install -g create-vite

步骤 2: 创建新的Vue项目

使用Vite创建一个新的Vue项目。在命令行中执行以下命令：

create-vite vue-router-demo --template vue

这将创建一个名为vue-router-demo的新目录，并使用Vite的Vue模板初始化项目结构。

步骤 3: 安装和配置 Vue Router

进入项目目录，并安装Vue Router：

cd vue-router-demo
npm install vue-router@next

步骤 4: 创建和配置路由

在项目的根目录（src目录下）创建一个新文件夹router，然后在其中创建一个名为index.js的文件。在该文件中配置路由：

// src/router/index.jsimport { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
];const router = createRouter({history: createWebHistory(),routes
});export default router;

步骤 5: 创建视图组件

在src/views目录下创建两个Vue组件文件：Home.vue和About.vue，并编写内容：

<!-- src/views/Home.vue -->
<template><div><h1>Home</h1><p>Welcome to the Home Page!</p></div>
</template><script>
export default {name: 'Home'
}
</script>

<!-- src/views/About.vue -->
<template><div><h1>About</h1><p>This is an About Page.</p></div>
</template><script>
export default {name: 'About'
}
</script>

步骤 6: 在主应用程序中使用路由

在src/main.js中导入创建的路由，并将其挂载到Vue应用程序中：

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

步骤 7: 创建入口组件

创建入口组件App.vue并定义主要的应用程序结构：

<template><div id="app"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link><router-view/></div>
</template><script>
export default {name: 'App'
}
</script>