2.1.364 • Published 2 years ago

makeit-admin-pro v2.1.364

Weekly downloads
97
License
MIT
Repository
github
Last release
2 years ago

基于 Vue3.x + Vite4.x + Ant Design Vue 构建的适用于中后台管理系统的组合模板框架。

( A unified template used to backend management system based on Vue3.x + Vite4.x + Ant Design Vue. )

npm package npm downloads MIT npm nodejs webpack vue vite axios ant design vue vue router vuex vue-i18n

关于

:triangular_flag_on_post: Makeit Admin Pro 是基于 Vue3.x + Vite4.x + Ant Design Vue 构建开发的一套适合中后台管理项目的 UI 框架。

:beginner: 框架内置了统一风格的页面布局 / 注册页面 / 登录页面 / 忘记密码 / 滑块验证码组件 / 搜索联想组件 / 动态菜单配置 / 权限管理配置等常用模块,开箱即用(有部分组件已抽离并发布于 Npm,可单独安装使用)。

:lollipop: 设计这套框架的初衷是为了免去中后台管理项目中,基础又重复的页面构建,如各个项目的基础布局,登录 / 注册 / 忘记密码等模块,让开发人员能更加专注于业务内容的开发,无需花费过多的时间在基础构建上。框架封装了 Axios / Cookie / Storage 等常用的基础基础功能,如 cookie 可通过如 this.$cookie 形式直接调用,同时也支持开发人员自行定制,易于扩展。现阶段还在不断完善,持续开发更新中 ...

:bug: 该框架并不一定适合所有人的需求,若您看到或是尝试使用了该框架 :innocent: 对该框架的 UI 或功能组件的使用有更好的建议,或组件存在 BUG 等,欢迎来 这里issues,我将尽力去解决相应的问题及尽量满足一些合理的定制化需求。

体验地址:https://admin.makeit.vip/

全局应用

:white_check_mark: 主题配置 ( css variables )

:white_check_mark: 国际化 ( vue-i18n )

:white_check_mark: Cookie ( document.cookie )

:white_check_mark: Storage ( localStorage & sessionStorage )

:white_check_mark: Request ( axios )

:white_check_mark: Global ( 全局配置 global configuration )

:white_check_mark: Tools ( 全局公用函数库 common functions )

基础组件

:white_check_mark: 基础布局 ( Layout ) :sparkling_heart:

:white_check_mark: 滑块验证码 ( Captcha ) :collision:

:white_check_mark: 锚点链接 ( Anchor ) :balloon:

:white_check_mark: 时钟 ( Clock - 仿 Apple Watch 表盘 ) :clock130:

:white_check_mark: 下拉菜单 ( Dropdown ) :palm_tree:

:white_check_mark: 忘记密码 ( Forget ) :hammer:

:white_check_mark: 历史路由 ( History ) :guitar:

:white_check_mark: 登录组件 ( Login ) :cherries:

:white_check_mark: 注册组件 ( Register ) :european_castle:

:white_check_mark: 菜单组件 ( Menu ) :rocket:

:white_check_mark: 弹窗动效 ( Modal ) :traffic_light:

:white_check_mark: 消息中心 ( Notice ) :round_pushpin:

:white_check_mark: 密码设置 ( Password ) :u7981:

:white_check_mark: 搜索组件 ( Search ) :bookmark_tabs:

:white_check_mark: 代码高亮 ( Code ) :flight_arrival:

:white_check_mark: 标题设置 ( Title ) :palm_tree:

:white_check_mark: 引用说明 ( Quotes ) :hash:

:white_check_mark: 回到顶部 ( Backtop ) :top:

高级应用

:x: 权限控制 :sunglasses:

:white_check_mark: 应用管理 :rose:

:white_check_mark: 菜单配置 ( 动态路由 ) :triangular_flag_on_post:

:white_check_mark: 语言配置 :snowflake:

:x: 富文本编辑器 :ocean:

:x: 地域选择 :heart_eyes_cat:

:x: 异常页面 ( 404 ) :sleeping:

:x: 个人中心 :heart_eyes:

:sparkles: ······

安装

npm i makeit-admin-pro

使用

import { createApp } from 'vue'
import MakeitAdminPro from 'makeit-admin-pro'
import 'makeit-admin-pro/dist/miitvip.min.css'
import App from './app.vue'

const app = createApp(App)
app.use(MakeitAdminPro)
app.mount('#app')

布局

<template>
    <mi-layout>
        <template v-slot:headerExtra>
            <mi-search :data="searchData"
                search-key="title"
                :width="120"
                :height="48"
                placeholder="搜索组件"
                :list-width="320"
                :list-height="335"
                :gap="4"
                :page-size="3"
                :list-radius="8"
                border-color="transparent"
                background-color="transparent" />
        </template>
    </mi-layout>
</template>

<script setup>
    import { getCurrentInstance } from 'vue'
    import { DashboardOutlined, LayoutOutlined } from '@ant-design/icons-vue'

    const { appContext: {config: {globalProperties: vm}} } = getCurrentInstance()

    // 全局变量, 直接设定左侧菜单
    vm.$g.menus.items = [{
        name: 'dashboard',
        path: '/dashboard',
        meta: {
            title: '控制中心',
            subTitle: 'Dashboard',
            icon: DashboardOutlined,
            tag: {color: '#f50', content: 'Hot'}
        }
    }, {
        // ... sider menu
    }]
    
    // 搜索数据
    const searchData = [{
        title: '页面布局',
        content: '基于 Layout 组件的二次定制',
        link: '/layout',
        icon: LayoutOutlined
    }, {
        // ... search data
    }]
</script>

登录

<template>
    <mi-login :action="api.login"
        :background="bg"
        :captcha-init-action="api.captcha.init"
        :captcha-verify-action="api.captcha.verify" />
</template>

<script setup>
import bg from '@images/login-bg.jpg'
</script>

注册

<template>
    <mi-register :action="api.register"
        :background="bg"
        :email-verify-action="api.validator.email"
        :username-verify-action="api.validator.name" />
</template>

<script setup>
import bg from '@images/login-bg.jpg'
</script>

更多

更多内容及使用请查看在线示例:https://admin.makeit.vip

2.1.364

2 years ago

2.1.329

2 years ago

2.1.328

2 years ago

2.1.330

2 years ago

2.1.332

2 years ago

2.1.331

2 years ago

2.1.334

2 years ago

2.1.333

2 years ago

2.1.336

2 years ago

2.1.335

2 years ago

2.1.338

2 years ago

2.1.337

2 years ago

2.1.339

2 years ago

2.1.341

2 years ago

2.1.340

2 years ago

2.1.343

2 years ago

2.1.342

2 years ago

2.1.345

2 years ago

2.1.344

2 years ago

2.1.347

2 years ago

2.1.346

2 years ago

2.1.349

2 years ago

2.1.348

2 years ago

2.1.318

2 years ago

2.1.317

2 years ago

2.1.319

2 years ago

2.1.321

2 years ago

2.1.320

2 years ago

2.1.323

2 years ago

2.1.322

2 years ago

2.1.325

2 years ago

2.1.324

2 years ago

2.1.327

2 years ago

2.1.326

2 years ago

2.1.350

2 years ago

2.1.352

2 years ago

2.1.351

2 years ago

2.1.354

2 years ago

2.1.353

2 years ago

2.1.356

2 years ago

2.1.355

2 years ago

2.1.358

2 years ago

2.1.357

2 years ago

2.1.359

2 years ago

2.1.361

2 years ago

2.1.360

2 years ago

2.1.363

2 years ago

2.1.362

2 years ago

2.1.316

2 years ago

2.1.315

2 years ago

1.200.639

4 years ago

1.200.635

4 years ago

1.200.638

4 years ago

1.200.636

4 years ago

1.200.637

4 years ago

1.200.634

4 years ago

1.200.633

4 years ago

1.200.632

4 years ago

1.200.631

4 years ago

1.200.630

4 years ago

1.200.629

4 years ago

1.200.628

4 years ago

1.200.627

4 years ago

1.200.625

4 years ago

1.200.626

4 years ago

1.200.624

4 years ago

1.200.623

4 years ago

1.200.622

4 years ago

1.200.621

4 years ago

1.200.620

4 years ago

1.200.618

4 years ago

1.200.619

4 years ago

1.200.617

4 years ago

1.200.616

4 years ago

1.200.615

4 years ago

1.200.614

4 years ago

1.200.612

4 years ago

1.200.613

4 years ago

1.200.611

4 years ago

1.200.610

4 years ago

1.200.609

4 years ago

1.200.608

4 years ago

1.200.607

4 years ago

1.200.606

4 years ago

1.200.605

4 years ago

1.200.604

4 years ago

1.200.603

4 years ago

1.200.602

4 years ago

1.200.600

4 years ago

1.200.599

4 years ago

1.200.598

4 years ago

1.200.594

5 years ago

1.200.597

5 years ago

1.200.595

5 years ago

1.200.596

5 years ago

1.200.593

5 years ago

1.200.592

5 years ago

1.200.591

5 years ago

1.200.590

5 years ago

1.200.589

5 years ago

1.200.588

5 years ago

1.200.587

5 years ago

1.200.586

5 years ago

1.200.585

5 years ago

1.200.584

5 years ago

1.200.583

5 years ago

1.200.582

5 years ago

1.200.580

5 years ago

1.200.581

5 years ago

1.200.579

5 years ago

1.200.577

5 years ago

1.200.578

5 years ago

1.200.575

5 years ago

1.200.576

5 years ago

1.200.574

5 years ago

1.200.573

5 years ago

1.200.572

5 years ago

1.200.571

5 years ago

1.200.570

5 years ago

1.200.569

5 years ago

1.200.568

5 years ago

1.200.567

5 years ago

1.200.566

5 years ago

1.200.564

5 years ago

1.200.563

5 years ago

1.200.560

5 years ago

1.200.561

5 years ago

1.200.562

5 years ago

1.200.557

5 years ago

1.200.558

5 years ago

1.200.559

5 years ago

1.200.556

5 years ago

1.200.555

5 years ago

1.200.554

5 years ago

1.200.553

5 years ago

1.200.551

5 years ago

1.200.552

5 years ago

1.200.550

5 years ago

1.200.549

5 years ago

1.200.548

5 years ago

1.200.546

5 years ago

1.200.547

5 years ago

1.200.544

5 years ago

1.200.545

5 years ago

1.200.543

5 years ago

1.200.542

5 years ago

1.200.540

5 years ago

1.200.541

5 years ago

1.200.539

5 years ago

1.200.538

5 years ago

1.200.537

5 years ago

1.200.535

5 years ago

1.200.536

5 years ago

1.200.533

5 years ago

1.200.534

5 years ago

1.200.531

5 years ago

1.200.532

5 years ago

1.200.530

5 years ago

1.200.529

5 years ago

1.200.527

5 years ago

1.200.526

5 years ago

1.200.525

5 years ago

1.200.524

5 years ago

1.200.523

5 years ago

1.200.522

5 years ago

1.200.521

5 years ago

1.200.520

5 years ago

1.200.519

5 years ago

1.200.518

5 years ago

1.200.517

5 years ago

1.200.516

5 years ago

1.200.515

5 years ago

1.200.514

5 years ago

1.200.513

5 years ago

1.200.512

5 years ago

1.200.511

5 years ago

1.200.510

5 years ago