使用Vite创建Vue3项目 配置路由+路径（包教包会）

一、创建项目：

1. 创建一个文件夹在文件夹上的 地址栏 或者是 win+R 打开cmd命令窗口。
   
   

2. 输入命令 npm create vite@latest
   
   这里我们的项目就创建完成了，可以直接使用开发者工具进行运行了。
   

二、配置路由

1. vue3+vite+ts路由配置

1. 首先我们安装一下路由：npm install vue-router@4
   Vue3 路由文档链接
   

2. 在src目录下 创建一个 routers文件夹（文件夹下创建一个index.ts文件） 和 views文件夹（文件下创建一个Home.vue）
   

3. 在index.ts文件中编写一下代码：
   

4. 在main.ts入口文件中引入：
   
5. 在app.vue文件中将路由容器写在里面。
   
   
   这样呢路由就配置好了。

2. vue3+vite+js路由配置

1. 首先我们安装一下路由：npm install vue-router@4
2. 跟ts差不多，也是创建两个文件夹和两个文件，但是我这把路由和路由表才分开了
   
3. index.js中写一下代码：
   
4. 在routers.js中编写一下代码
   
5. 在main.js入口文件编写一下代码（后面的步骤就跟上面ts的一样了。）：
   

三、配置路径

1. 这里需要安装一个文件路径插件 npm install --save-dev @types/node
   

2. 首先在 vite.config.ts 中配置
   

3. 其次在tsconfig.json中配置（在compilerOptions中配置）
   
   最后将引入的Home.vue文件更改成 @ 引入