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

使用vite创建项目

npm init vite @latest vite 首次安装

安装说明：

1. Ok to proceed？ 是否继续 Y
2. Package name？项目名称 @latest
3. Select a framework 选择一个框架 vue
4. 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路由

src根目录下创建router文件夹,新增index.ts路由配置文件

npm install vue-router@4

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

index.ts 路由配置文件说明

import { staticRouter, errorRouter } from "./modules/global"; // 导入全局路由和错误路由
import { createRouter, createWebHashHistory } from 'vue-router'; // 导入Vue Router模块方法

// createRouter方法创建一个路由实例
const router = createRouter({
    history: createWebHashHistory(),
    routes: [...staticRouter, ...errorRouter],
    scrollBehavior: () => ({ left: 0, top: 0 })
});

Vue Router模块方法说明：

• createRouter 方法创建一个路由实例
• createWebHashHistory 方法创建一个hash模式的路由。Hash 模式下，URL 中的 hash 符号（#）后面的部分被视为页面的锚点，它不会被发送到服务器，而是由浏览器在客户端进行处理，使得应用可以在前端进行页面路由切换。

路由实例说明：

• history 选项：用于指定路由模式
• routes 选项：用于指定路由表，当前路由实例中包含动态路由和公共路由
• scrollBehavior选项：用于设置路由跳转时页面滚动行为，这里使用一个函数，返回一个对象，表示页面跳转后滚动到左上角。

global.ts 全局路由说明

import { RouteRecordRaw } from 'vue-router'; 
import { HOME_URL } from "../../config/config"; // 导入全局配置项
const layout = () => import("../../layout/index.vue") // 引入layout布局
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 页面。

config.ts 全局配置说明

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

别名配置

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

// * vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),  //  __dirname：当前模块目录名
      'components': resolve(__dirname, 'src/components'),
    }
  },
})

// * tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "components/*": ["src/components/*"]
    }
  }
}