Vite真快！

但是我们要解决的是如何在Vite中使用配置Vue-router，因为Vite内并没有路由。

准备

先运行cmd检查自己的node版本是不是高于14.18.0

node -v

如果node并没有大于14.18.0

windows用户我建议去(Node.js 中文网 (nodejs.cn)下载一个覆盖安装在之前的Node文件夹内。（也可以先卸载再安装）

注意！！网传用n来安装更新啥啥的亲测并不好使！（window用户瑟瑟发抖）

OK！我们开始正题。

创建项目 npm create vite@latest

当然当然还没有安装Vue-router。

安装Vue-Router4

记得cd进项目啊~！

npm install vue-router@4

注意！！！

还没完，需要再下载依赖。

npm i

继续~

用编译器打开项目找到package.json文件查看Vue-router版本来验证是否安装到位。

在目录中的res内创建router文件夹，文件文件夹内创建index.ts

index.ts内容如下：（请直接复制粘贴）

import { createRouter, createWebHistory,RouteRecordRaw } from 'vue-router'

const routes:Array<RouteRecordRaw> = [
    {
        path:"/",
        component:()=>import('../components/xxx.vue')
    }
]
// 配置router对象
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

将App.vue清空加入一个router-view标签(直接复制吧)

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

将components里的HelloWorld.vue删掉，换上你自己创建的页面。

别忘了在router文件的index.ts里加路径

还没完！！

在main.ts内引入router

import router from './router'

.use(router)

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


const app = createApp(App)

createApp(App).use(router).mount('#app')

最后

npm run dev

去看你的新页面吧