创建vue3（vite）项目

 打开文件夹，地址栏输入cmd

npm init vite@latest vitedemo -- --template vue

选择 vue ，用vscode打开文件夹，下载包

npm i

然后 npm run dev 运行

 安装router插件

npm install vue-router@4 -S

在src目录下新建router文件夹，新建index.js文件，写代码

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

在src目录下新建views文件夹，新建Home.vue和About.vue文件，写代码

<template>
    <div>
        Home
    </div>
</template>

<template>
    <div>
        About
    </div>
</template>

将App.vue文件里的内容替换成下方代码

<template>
  <router-view />
</template>

在main.js里引入并使用路由

import { createApp } from 'vue'
import App from './App.vue'

//引入路由文件
import router from './router'

//使用路由
createApp(App).use(router).mount('#app')

打开reset.css网站CSS Tools: Reset CSS

 在src下的assets文件夹下创建css文件夹，创建文件reset.css文件，将上面箭头里的代码复制粘贴，在App.vue中引入这个css文件

<template>
  <router-view />
</template>

<style>
@import "./assets/css/reset.css"
</style>

最后效果如下