一：Vue3.2+TS 项目创建与基础配置使用vite创建项目 npm init vite @latest vite 首

使用vite创建项目

npm init vite @latest vite 首次安装

安装说明：

Ok to proceed？是否继续 Y
Package name？项目名称 @latest
Select a framework 选择一个框架 vue
Select a variant 选择一个版本 Typescript

npm create vite vite 创建项目

使用 element-plus UI框架

npm install element-plus --save

main.ts
import './style.css'
import App from './App.vue'
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus).mount('#app')

配置Vue-Router路由

npm install vue-router@4

main.ts
import router from './router/index'
app.use(ElementPlus).use(router).mount('#app')

index.ts 路由配置文件说明

src > router > index.ts

插件安装：

npm i --save-dev @types/js-cookie (cookie管理)
npm i --save-dev @types/nprogress （页面进度条）

import Cookies from "js-cookie";
import NProgress from 'nprogress'
import { staticRouter, errorRouter } from "./modules/global"; //全局路由
import { createRouter, createWebHashHistory } from 'vue-router'; 

const router = createRouter({
    history: createWebHashHistory(),
    routes: [...staticRouter, ...errorRouter],
    scrollBehavior: () => ({ left: 0, top: 0 })
});

router.beforeEach(async (to, from, next) => {
    const token = Cookies.get('token')
    const isLoginPage = to.path === LOGIN_URL;

    try {
        NProgress.start();

        if (isLoginPage) {
            if (token) {
                return next(from.fullPath);
            } else {
                return next();
            }
        }

        if (!token) {
            return next(LOGIN_URL);
        }


        next();
    } finally {
        NProgress.done();
    }
});

router.onError(error => {
    console.warn("路由错误", error.message);
});

路由实例配置：

createRouter 方法创建一个路由实例
createWebHashHistory 方法创建一个hash模式的路由。Hash 模式下，URL 中的 hash 符号（#）后面的部分被视为页面的锚点，它不会被发送到服务器，而是由浏览器在客户端进行处理，使得应用可以在前端进行页面路由切换。
history 选项：用于指定路由模式
routes 选项：用于指定路由表，当前路由实例中包含动态路由和公共路由
scrollBehavior选项：用于设置路由跳转时页面滚动行为，这里使用一个函数，返回一个对象，表示页面跳转后滚动到左上角。

路由导航守卫配置：

beforeEach函数会在每次路由导航之前执行，首先使用Cookies.get('token')获取保存在浏览器中的token。然后判断路由是否是登录页面，如果是，则检查是否有token，如果有则重定向到之前访问的页面，如果没有则直接放行。如果不是登录页面，那么需要检查是否有token，如果没有，则重定向到登录页面，如果有，则直接放行。

在整个路由导航过程中，这个函数是最后一个被执行的，它使用finally关键字确保无论如何最终都会执行，即使在函数体中发生了错误，也会执行NProgress.done()来结束加载进度条。同时，还定义了一个onError函数来处理路由错误。

config.ts 全局配置说明

src > router > config > config.ts

// * 路由地址（默认）
export const LOGIN_URL: string = "/login";
export const HOME_URL: string = "/home/index";
export const DASHBOARD_URL: string = "/dashboard";

nprogress.ts 进度条配置

src > router > config > nprogress.ts

import NProgress from 'nprogress'

import "nprogress/nprogress.css";

NProgress.configure({
    easing: "ease", // 动画方式
    speed: 500, // 递增进度条的速度
    showSpinner: true, // 是否显示加载ico
    trickleSpeed: 200, // 自动递增间隔
    minimum: 0.3 // 初始化时的最小百分比
});
export default NProgress;

global.ts 全局路由配置

src > router > modules > global.ts

import { RouteRecordRaw } from 'vue-router'; 
import { HOME_URL } from "@/config/config"; // 导入全局配置项
const Login = () => import("@/views/login/index.vue") // 引入登陆页 

// 定义全局路由
export const staticRouter: RouteRecordRaw[] = [
    {
        path: "/",
        redirect: HOME_URL
    },
    {
        path: "/login",
        name: "login",
        component: Login,
        meta: {
            title: "登录"
        }
    }
]


// 错误页面路由信息
export const errorRouter = [
    {
        path: "/403",
        name: "403",
        component: () => import("../../components/ErrorMessage/403.vue"),
        meta: {
            title: "403页面"
        }
    },
    {
        path: "/404",
        name: "404",
        component: () => import("../../components/ErrorMessage/403.vue"),
        meta: {
            title: "404页面"
        }
    },
    {
        path: "/500",
        name: "500",
        component: () => import("../../components/ErrorMessage/403.vue"),
        meta: {
            title: "500页面"
        }
    }
];

// 用于处理未匹配到的路由，如果 URL 不匹配任何已知的路由，则重定向到 404 页面。
export const notFoundRouter = {
    path: "/:pathMatch(.*)*",
    name: "notFound",
    redirect: { name: "404" }
};

RouteRecordRaw 路由信息

RouteRecordRaw 是 Vue Router 提供的一种接口类型，用于描述路由信息。在路由配置中，可以使用 RouteRecordRaw 对象描述路由的 path、component、name 等信息，然后将这些路由信息组合成一个路由配置数组，传递给 Vue Router。

notFoundRouter 路由无效

:pathMatch 是一个命名的参数，用于捕获匹配到的所有路径。括号中的 .* 则表示该参数捕获的路径可以包含任意数量的字符，包括斜杠 /。

而最后的 * 则表示该路由可以匹配零个或多个路径段，即该路由可以匹配所有路径。这样定义的路由一般用于匹配不存在的路由，并将其重定向到一个自定义的页面，如 404 页面。

Vite工具配置（vite.config.ts）

安装插件：

npm i unplugin-vue-components (Vue 组件自动导入插件)
npm i unplugin-auto-import -D (官方API 自动导入)
npm i @vitejs/plugin-vue-jsx@1.3.10 （Vue 使用JSX 插件）

// * vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    })],
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
      'components': resolve(__dirname, 'src/components'),
    }
  },
  server: {
    base: "./ ",
    port: 2333,
    open: false,
    proxy: {
      '/api': {
        target: '服务器地址',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    },
    cors: true
  }
})

plugins：配置插件

plugins: [...]: 配置 Vite 的插件。
vue(): 使用 Vite 的 Vue 插件。
vueJsx(): 使用 Vite 的 Vue JSX 插件。
AutoImport({...}): 使用 Vite 的自动导入插件，并指定插件的配置项。
Components({...}): 使用 Vite 的 Vue 组件自动导入插件，并指定插件的配置项。

resolve：配置路径解析规则

使用 resolve 函数来解析路径，并通过 __dirname 来获取当前模块所在目录的绝对路径。然后，将别名定义为对象 alias 的属性，例如将 @ 定义为指向 src 目录的绝对路径，将 components 定义为指向 src/components 目录的绝对路径。这样，在应用程序中就可以使用别名 @ 来引用 src 目录下的文件，使用别名 components 来引用 src/components 目录下的文件，而不需要使用相对路径或绝对路径。

server：配置开发服务器

base：设置开发服务器的根目录，默认值是项目的根目录，可以通过设置这个值来改变根目录的位置。
port：设置开发服务器的监听端口号，默认是 3000。
open：启动开发服务器后是否自动打开浏览器，默认值为 true。
proxy：设置开发服务器的代理配置，可以将请求转发到其他服务器。例如，配置中的 '/api' 表示将以 '/api' 开头的请求转发到目标服务器。
cors：设置是否启用跨域资源共享，默认值为 true。

proxy：配置跨域请求

/api: 定义需要代理的接口路径。在这里，所有以 /api 开头的请求都会被代理。
target: 配置接口的目标地址，也就是需要请求的地址。
changeOrigin: 是否改变来源。如果设置为 true，则会将请求头中的 host 字段设置为代理服务器的地址。
secure: 是否为安全协议。如果是 https，则需要将其设置为 true，否则为 false。
rewrite: 可选属性，用于重写请求路径。在这里，将 /api 替换为空字符串，也就是去掉了 /api 前缀，重新拼接路径。

一：Vue3.2+TS 项目创建与基础配置