简介

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

设置淘宝的镜像源

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

运行

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

其他

cnpm

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

菜单格式

{
    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'), //指定文件
        },
      },
    ],
  }