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

使用Vite创建Vue3项目 配置路由+路径

  • 一、创建项目:
  • 二、配置路由
  • 三、配置路径

一、创建项目:

  1. 创建一个文件夹在文件夹上的 地址栏 或者是 win+R 打开cmd命令窗口。
    打开cmd
    使用Vite创建Vue3项目 配置路由+路径(包教包会)_第1张图片
  1. 输入命令 npm create vite@latest
    使用Vite创建Vue3项目 配置路由+路径(包教包会)_第2张图片
    这里我们的项目就创建完成了,可以直接使用开发者工具进行运行了。
    使用Vite创建Vue3项目 配置路由+路径(包教包会)_第3张图片

二、配置路由

  1. 首先我们安装一下路由:npm install vue-router@4
    Vue3 路由文档链接
    在这里插入图片描述
  1. 在src目录下 创建一个 routers文件夹(文件夹下创建一个index.ts文件)views文件夹(文件下创建一个Home.vue)
    使用Vite创建Vue3项目 配置路由+路径(包教包会)_第4张图片
  1. index.ts文件中编写一下代码:
    使用Vite创建Vue3项目 配置路由+路径(包教包会)_第5张图片
  1. 在main.ts入口文件中引入:
    使用Vite创建Vue3项目 配置路由+路径(包教包会)_第6张图片
  2. 在app.vue文件中将路由容器写在里面。
    使用Vite创建Vue3项目 配置路由+路径(包教包会)_第7张图片
    使用Vite创建Vue3项目 配置路由+路径(包教包会)_第8张图片
    这样呢路由就配置好了。

三、配置路径

  1. 这里需要安装一个文件路径插件 npm install --save-dev @types/node
    在这里插入图片描述
  1. 首先在 vite.config.ts 中配置
    使用Vite创建Vue3项目 配置路由+路径(包教包会)_第9张图片
  1. 其次在tsconfig.json中配置(在compilerOptions中配置)
    使用Vite创建Vue3项目 配置路由+路径(包教包会)_第10张图片
    最后将引入的Home.vue文件更改成 @ 引入
    使用Vite创建Vue3项目 配置路由+路径(包教包会)_第11张图片

你可能感兴趣的:(案例,#,Vue,vue.js,前端,javascript)