Vue Router 的下一代：unplugin-vue-router 安装与配置完全指南

姚姝卿

于 2024-09-13 21:58:15 发布

阅读量451

点赞数 3

本文链接：https://blog.csdn.net/gitblog_07492/article/details/142226288

版权

Vue Router 的下一代：unplugin-vue-router 安装与配置完全指南

unplugin-vue-router Next-gen file based typed routing for vue router 项目地址: https://gitcode.com/gh_mirrors/un/unplugin-vue-router

项目基础介绍及编程语言

项目名称: unplugin-vue-router
主要编程语言: TypeScript, JavaScript
项目简介: unplugin-vue-router 是一个为 Vue 应用程序设计的下一代文件基于的类型化路由工具。它简化了路由的设置过程，并通过 TypeScript 的支持使其更加安全且易于使用。此插件要求 Vue Router 版本在 4.4.0 或以上。

关键技术和框架

Vue.js: 作为前端框架，提供了组件化的开发方式。
Vue Router: 路由管理器，负责管理Vue应用中的页面切换。
TypeScript: 强类型的编程语言，增强代码的可维护性和安全性。
Vite, Rollup, Webpack, Esbuild: 支持多种构建工具，以适应不同项目需求。
unplugin: 一种新型的Vue插件体系，专注于构建时（build-time）处理。

安装和配置详细步骤

准备工作

确保你的开发环境已准备好以下工具：

Node.js 已安装。
Vue项目已经初始化（推荐使用Vue 3.x）。

步骤一：安装 unplugin-vue-router

打开终端，导航到你的Vue项目目录下，运行以下命令来安装unplugin-vue-router作为开发依赖：

npm install --save-dev unplugin-vue-router
# 或者，如果你使用yarn
yarn add -D unplugin-vue-router

步骤二：配置构建工具

对于Vite:

编辑 vite.config.ts 文件，添加VueRouter插件在Vue插件之前：

import { defineConfig } from 'vite';
import VueRouter from 'unplugin-vue-router/vite';

export default defineConfig({
  plugins: [
    VueRouter(), // 确保Vue实例在其后
    // Vue() // 根据你的实际配置放置Vue插件的位置
  ],
});

对于其他构建工具如Rollup、Webpack或Vue CLI:

Rollup: 修改 rollup.config.js 类似于Vite的配置。
Webpack: 在 webpack.config.js 中引入并配置。
Vue CLI: 在 vue.config.js 添加自定义Webpack配置块。

具体配置细节需参考官方文档或上述Vite的示例进行对应调整。

步骤三：生成和配置类型

运行开发服务器通常通过 npm run dev 或相应命令。
第一次运行后，你需要手动配置项目的 tsconfig.json，添加以下内容到 "include" 部分来让TypeScript识别生成的类型：
```
{
  "include": [
    "...",
    "./typed-router.d.ts"
  ]
}
```
如果没有找到 typed-router.d.ts 文件，请确保执行完dev模式后根据提示或文档生成相应的类型文件。
可能还需要在项目中创建或修改 env.d.ts 文件，添加对unplugin-vue-router客户端的支持：
```
/// <reference types="vite/client" />
/// <reference types="unplugin-vue-router/client" />
```

步骤四：集成到Vue Router

最后，在你的路由配置中，使用自动生成的路由：

import { createRouter, createWebHistory } from 'vue-router';
// 自动导入路由
import { routes } from 'vue-router/auto-routes';

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

export default router;