64 Star 906 Fork 268

Asa/vue3-element-admin

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README
MIT

logo

vue3-element-admin

✈ 国内加速链接
✈ 效果预览
✈ 效果预览(备用地址)
走过路过的老铁,帮忙点个小 ⭐⭐⭐⭐⭐,🤝🤝🤝🤝🤝,🙏🙏🙏🙏🙏

项目简介

基于vue3element-plus开发的企业后台管理模板.


登录页 404 用户管理 菜单管理 角色管理 iframe页面

功能特性

项目使用了最新的vue3 全家桶+element-plus+mockjs+axios+eChart5.项目继成了mockServe,可脱离后端自主开发测试 对axios深度封装,采用动态路由,路由配置更简单,mockServe独立开发测试时可在 nodework 直观查看接口数据
基于 node 实现自动化开发

环境依赖

node 14+, vueCli 4+

部署步骤

npm i npm run serve

目录结构描述

│  .browserslistrc			浏览器兼容配置
│  .eslintrc.js				eslint配置文件
│  .gitignore				git配置文件
│  babel.config.js			babel配置文件
│  jsconfig.json 			js配置文件
│  LICENSE 					开源认证
│  package-lock.json
│  package.json
│  README.md				项目说明
│  vue.config.js 			vue配置文件

├─.vscode					vscode配置文件
│      settings.json

├─node_modules
├─public
│      favicon.ico
│      index.html

└─src
    │  App.vue
    │  main.js
    │  config.js

    ├─api					api管理模块
    │  │  index.js			api管理入口文件
    │  │  mock-server.js	mock服务配置文件
    │  │
    │  └─modules			api分模块管理
    │          system.js	模块api文件

    ├─assets				静态文件
    │      logo.png

    ├─components			公共组件目录
    │  │  Common.vue
    │  │  FunctionPage.vue
    │  │
    │  ├─dashboard
    │  │      LiveChart.vue
    │  │      Shortcuts.vue
    │  │
    │  └─layout
    │      │  NavigateBar.vue
    │      │  SideBar.vue
    │      │
    │      └─components
    │              Breadcrumb.vue
    │              Hamburger.vue
    │              Logo.vue
    │              Personal.vue
    │              SlideMenu.vue

    ├─directives			自定义指令目录
    │  │  index.js			自定义指令入口文件
    │  │
    │  └─modules 			自定义指令模块目录
    │          permission.js
    │          resize.js

    ├─plugins				插件目录
    │      axios.js
    │      element.js
    │      mock.js
    │      permission.js

    ├─router 				router目录
    │      globalRoutes.js
    │      index.js
    │      mainRoutes.js

    ├─store 				vuex目录
    │  │  getters.js
    │  │  index.js
    │  │
    │  └─modules			vuex模块目录
    │          app.js

    ├─styles 				样式目录
    │      common.scss
    │      variables.scss.js

    ├─utils					公共方法
    │      index.js
    │      validate.js

    └─views
        │  404.vue
        │  AppMain.vue
        │  Home.vue
        │  IFrame.vue
        │  Login.vue

        └─layoutpages
            │  common.js

            ├─leisure
            │      Game.vue

            └─system
                │  Menus.vue
                │  Roles.vue
                │  Users.vue

                └─components
                        MenuEdit.vue
                        RoleEdit.vue
                        UsersEdit.vue
                        UsersEditRoute.vue

使用文档

自定义指令

v-permission="[array]" 自定义权限指令,参数为一个数组,数组元素为按钮所对应的 key 值

<el-button
    v-permission="['add']"
    size="small"
    type="primary"
    @click="handleEdit(menus.add.name)"
    >{{ menus.add.name }}
</el-button>

v-resize="myChart" 监听 echart 容器的自定义指令,参数为 echart 实例

<div
    v-resize="myChart"
    style="height:400px;margin-top:20px"
    ref="liveChart"
></div>

动态路由

动态路由的配置可查看 src\plugins\permission.js
主要原理就是根据后端接口返回的树形菜单数据,动态生成路由表并挂载.具体需求字段可在src\plugins\permission.js中的fnAddDynamicMenuRoutes方法中进行配置修改

let route = {
    path: menuList[i].url.replace(/\//g, "-") + `-${menuList[i].id}`,
    component: null,
    name: menuList[i].url.replace(/\//g, "-") + `-${menuList[i].id}`,
    // meta: {
    // }
};
// url以http[s]://开头, 通过iframe展示
if (menuList[i].iframe == 1) {
    route["path"] = `i-${menuList[i].id}`;
    route["name"] = `i-${menuList[i].id}`;
    route["props"] = { url: menuList[i].url };
    route["component"] = () => import("@/views/IFrame.vue");
} else {
    const l = "views/layoutpages/" + menuList[i].url;
    route["component"] = () => import("@/" + l + ".vue");
}
routes.push(route);

根据需求可以添加更多路由配置或定制化字段,如路由别名等

接口配置

项目中对 axios 做了封装配置中添加Global字段用来控制是否显示全屏 load,默认为 true,如需修改添加 axios 配置可在src\plugins\axios.js中进行

添加接口

本项目对 mock 做了深度集成,在使用其他项目时,mock 接口和项目接口往往都是分开维护很不方便.所以就放在了一起.只用在一处添加即可.接口目录为src\api\modules不要修改此目录名称.在该目录下添加对应的接口文件.

module.exports = {
    login: {
        //接口名称  必须
        url: "/login", //接口地址  必须
        type: "post", //请求类型  必须
        mock: true, //mock细粒度控制开关,非必须,不填则为false
        response: (opt) => {
            //启用mock时的返回数据  opt为请求数据头
            const {
                body: { userName, pwd },
            } = opt;
            let data = {
                code: "00",
                message: "登录成功!",
                token: new Date().getTime(),
                uname: userName,
            };
            if (userName == "Administrator") {
                if (pwd != "123456") {
                    data = {
                        code: "01",
                        message: "密码错误",
                    };
                }
            }
            return data;
        },
    },
};

必须使用module.exports导出

接口的使用

项目中已将封装后 axios 实例挂载到自定义字段 window.VE_API 上.调用方式为:

VE_API [ fileName ][ portName ] (params,[config])   //有全局loading
VE_API [ fileName ][ portName ] (params,{Global:false)   //没有全局loading

菜单配置

项目中的菜单时根据后端返回的树形结构数据动态生成,具体可查看src\components\layout\components\SlideMenu.vue

声明

个人开发维护! 欢迎交流学习!

MIT License Copyright (c) 2021 Asa Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

基于vue3.0和element-plus开发的企业后台管理模板. expand collapse
JavaScript and 4 more languages
MIT
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/asaasa/vue3-element-admin.git
git@gitee.com:asaasa/vue3-element-admin.git
asaasa
vue3-element-admin
vue3-element-admin
dev

Search