2、添加路由

1、在项目根目录安装 vue-router：npm i vue-router@next【@next 代表的是安装最新的版本】

2、在 src 目录下新建 router/index.js，并添加路由配置项

// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import Index from '@/views/Index.vue'const router = createRouter({history: createWebHashHistory(), // hash 模式routes: [{path: '/',component: Index}]
})export default router

3、src 目录下新增 views 目录，用于放置页面组件

4、在views中新建Index.vue，添加Index页面

<template>Index
</template><script>
export default {}
</script>

5、上述获取文件路径是通过 @/ 的形式。这需要在 vite.config.js 下添加 resolve.alias

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {'~': path.resolve(__dirname, './'),'@': path.resolve(__dirname, 'src')},}
})

@ 代表 src 目录下的别名；~ 代表根目录下的别名，这样在项目中使用路径的时候，就不用写一长串。

6、在 src/main.js 中引入路由实例

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)app.use(router) // 引用路由实例
app.use(ElementPlus)app.mount('#app')

7、修改 src/App.vue，将路由展示出来

<template><!--路径匹配到的组件，将会展示在这里--><router-view></router-view>
</template><script>export default {name: 'App'}
</script>

8、运行 npm run dev 启动项目