vue3+vite+ts项目安装路由

安装路由

vue3项目中安装路由需要4.0以上版本
一、安装命令如下

安装最新版本的router

npm install vue-router@next --save

也可指定版本安装

npm install vue-router@版本号 --save

这里选择安装最新版本的router，安装完成后，在package.json中查看vue-router是否安装成功


二、配置router文件
1. 在src文件夹下创建router文件夹，在router文件夹下创建modules文件夹，创建home.ts及test.ts文件
2.在src文件夹下创建views文件夹，并创建Home及Test页面，如下图所示




3.在router文件夹下创建index.ts文件，并填入代码

4. 在 main.ts 中引入

5. 在 App.vue 中配置路由出口

6. 测试配置是否成功，运行项目，在地址栏输入不同的地址，切换到不同的页面，则vue-router配置完成，模块化完成

问题1：
创建完在注册路由import引入的时候会遇到报红提示。标红原因是在 .vue 文件中，通常会存在模板、样式和脚本等不同的部分，但是 TypeScript 默认不知道如何处理.vue文件的代码，因此在导入 .vue 文件时会报错。

解决：
通过在 vite-env.d.ts 文件中声明模块 *.vue，并将其定义为一个 Vue 组件类型，就相当于告诉 TypeScript 编译器如何正确处理这些 .vue 文件。

注：1、如果项目中没有vite-env.d.ts` 文件，可自行建一个env.d.ts文件。添加以下代码：

declare module "*.vue" {
    import type { DefineComponent } from "vue";
       const vueComponent: DefineComponent<{}, {}, any>;
       export default vueComponent;
  }

2、要禁用vue项目的vetur插件，安装vue3配套的volar插件

问题2：
引入文件使用alias别名@时标红
解决：
1. 在tsconfig.json中加入

 "compilerOptions": {
  		 ...
	    "types": [
	      "node"
	    ],
	    "baseUrl": ".",
	    "paths": {
	      "@/*": ["src/*"]
	    }
  },

2. 在vite.config.ts中修改

import path from "path"
export default defineConfig({
  resolve: {
    // 配置别名
    alias: [
      { find: "@", replacement: path.resolve(__dirname, "src") },
    ],
  },
  base: "./",
})