# web-skeleton

**Repository Path**: cdyun/web-skeleton

## Basic Information

- **Project Name**: web-skeleton
- **Description**: Vue3 项目开发 WEB 骨架结构，vue3 + typeScript + vite5 + vue-router + pnpm
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-28
- **Last Updated**: 2024-04-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 项目开发 WEB 骨架结构

vue3 + typeScript + vite5 + vue-router + pnpm

### 1. pnpm 替代 npm 管理依赖包

### 2. 路由功能介绍

应用先是通过获取 views 目录(包括递归目录)下所有的 index.vue 文件，自动生成路由信息，然后通过 views 根目录下的 index.ts 文件进行路由信息的筛选匹配，最后完成注册。

### 3. 类型配置介绍（/src/typings/route.d.ts）

```
  /**
   * 路由元信息
   * 可自行定义需要用到的key
   */
  interface RouteMeta extends Record<string | number | symbol, any> {
    // 唯一id
    id: number;
    // 关联父级id
    pid: number;
    // 排序
    order?: number;
    // 是否是菜单
    isMenu?: boolean;
    // 是否是动态路由
    dynamicRoute?: boolean;
    // 动态路由路径
    dynamicPath?: string;
    // 菜单标题
    title: string;
    // 页面描述
    desc?: string;
    [key: string]: any;
  }

  /**
   * 路由类型
   */
  type RouteItem = RouteRecordRaw & {
    name: string;
    path: string;
    meta: RouteMeta;
    children?: RouteItem[];
    component?: RouteComponent | Lazy<RouteComponent> | string;
  };
```

### 4. 命令

```
"pnpm dev",

"pnpm build",

"pnpm lint",
```