# 简介

DUI 一个基于 Vue3、Vue-router、 Vite、 TypeScript、 Elment-UI-Plus 的前端框架。

## 相关说明

|                |                      相关地址                      |
| :------------: | :------------------------------------------------: |
|      Vue3      |                 https://vue3js.cn/                 |
|   Vue-router   |            https://router.vuejs.org/zh/            |
|      Vite      |                 https://vitejs.cn/                 |
|   TypeScript   | https://www.runoob.com/typescript/ts-tutorial.html |
| Elment-UI-Plus |        https://element-plus.gitee.io/zh-CN/        |



## 项目源码

|       |              前端源码               |
| :---: | :---------------------------------: |
| GitEE | https://gitee.com/dmc_qq/VueWeb.git |

# 目录结构

```
|-- src
    |-- App.vue //根组件
    |-- main.ts //入口ts文件
    |-- shims-vue.d.ts //typescript的适配定义文件
    |-- vite-env.d.ts //vite配置文件
    |-- api //接口文件
    |-- assets //资源目录
    |   |-- image //图片
    |   |-- ioc //图标
    |   |-- style //样式
    |   |-- video //视频
    |-- components //组件目录
    |-- data //自定义data数据
    |-- layout //主页面布局
    |   |-- index.vue //主页面
    |   |-- components
    |       |-- Head.vue //头部
    |       |-- Item.vue //图标
    |       |-- SidebarItem.vue //菜单栏
    |       |-- TabControl.vue //选项卡
    |-- router //页面路由
    |   |-- index.ts
    |-- store //vuex全局配置
    |   |-- index.js
    |   |-- tabValue.js
    |-- style //全局样式
    |   |-- main.css
    |-- utils //工具类
    |   |-- cookie.js
    |-- views //页面视图
        |-- home
        |   |-- Home.vue
        |-- home1
        |   |-- index.vue
        |-- home2
        |   |-- index.vue
        |-- login
        |   |-- Login.vue
        |-- menu
            |-- index.vue
```

# 快速预览

## 所需环境

```
Node v10+ (最好使用 12，高版本可能会有问题)
安装教程：https://www.runoob.com/nodejs/nodejs-install-setup.html
```

## 设置淘宝的镜像源

```text
npm config set registry https://registry.npm.taobao.org
配置后可通过下面方式来验证是否成功
npm config get registry
```

## 运行

```tex
npm install //下载依赖
npm run dev //运行程序
```

## 其他

###  cnpm

```text
npm install -g cnpm --registry=https://registry.npm.taobao.org
```

### npm常用指令

| 更新淘宝镜像 |   cnpm i @vue/cli -g    |
| :----------: | :---------------------: |
|   更新npm    |      npm i npm -g       |
|   清空缓存   | npm cache clear --force |

#菜单路由

## 菜单路由

通过用户的角色返回相应的菜单路由，前端关键代码： `src/router/index.ts`

## 菜单格式

```js
{
    path: '/layout/index',
    name: 'Layout',
    component: () => import('@/layout/index.vue'),
    redirect: '/views/home',
    children: [ //展开层级
      {
        path: '/views/home', //页面路由
        name: 'Home', //页面名称
        meta: { title: '主页', isAuth: true }, //用户自定内容
        components: {
          key: () => import('@/views/home/Home.vue'), //指定文件
        },
      },
    ],
  }
```