2 Star 21 Fork 5

makeit.vip/miitvip-vue-admin-manager

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README

makeit.vip

Makeit Admin Pro 3.x

基于 Vue3.x 构建的适用于中后台管理系统的开箱即用的组合模板框架

( An out-of-box UI solution for enterprise applications built on Vue3.x )

npm package npm downloads MIT nodejs vue vite ant design vue pinia vue-i18n axios swiper nprogress vue-router

注意

3.x 版本的 npm 包更名为 @miitvip/admin-pro

2.x 版本的 npm 包在这里 makeit-admin-pro

3.x 版本体验地址 「 https://admin.makeit.vip

2.x 版本体验地址 「 https://2x.makeit.vip

关于

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

:beginner: 框架内置了统一风格的页面布局 / 注册页面 / 登录页面 / 忘记密码 / 滑块验证码组件 / 搜索联想组件 / 动态菜单配置 / 权限管理配置等常用模块,开箱即用

:lollipop: 设计这套框架的初衷是为了免去中后台管理项目中基础又重复的页面构建,将页面内的一系列行为进行封装形成重型组件(一个组件 ≈ 一个页面),如基础布局 Layout,登录 Login / 注册 Register / 忘记密码 Forget 等页面模块,让开发人员能更加专注于业务内容的开发,无需花费过多的时间在基础构建上,希望可以通过 Makeit Admin Pro 系列组件提供快速高效的搭建高质量的中后台应用,现阶段还在不断完善,持续开发更新中 ...

效果图

深色主题

深色主题

浅色主题

浅色主题

更换主题

快速上手

收合菜单

收合菜单

手机效果

手机效果

全局应用

:white_check_mark: 主题配置 ( css modules + 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 ( 全局公用函数库 global functions )

基础组件

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

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

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

:white_check_mark: 在线钟表 ( Clock ) :clock130:

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

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

:white_check_mark: 链接地址 ( Link ) :guitar:

:white_check_mark: 调色面板 ( Palette ) :books:

:white_check_mark: 登录页面 ( Login ) :cherries:

:white_check_mark: 注册页面 ( Register ) :european_castle:

:white_check_mark: 授权登录 ( Socialite ) :dizzy:

: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:

:x: 应用管理 :rose:

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

:x: 语言配置 :snowflake:

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

:x: 地域选择 :heart_eyes_cat:

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

:x: 个人中心 :heart_eyes:

:sparkles: ······

安装使用

npm i @miitvip/admin-pro

全局引入

import { createApp } from 'vue'
import MakeitAdminPro from '@miitvip/admin-pro'
import App from './app.vue'

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

按需加载

import { createApp } from 'vue'
import router from './router'
import App from './app.vue'
import { Layout, Notice } from '@miitvip/admin-pro'

const app = createApp(App)
app.use(router)
const components = [Layout, Notice]
components.forEach((component) => app.use(component))
app.mount('#app')

基础布局

<template>
    <mi-layout />
</template>

<script lang="ts" setup>
    import { useStoreMenu } from '@miitvip/admin-pro'

    // 更新菜单
    const menuStore = useStoreMenu()
    menuStore.updateMenus([
        {
            name: 'dashboard',
            path: '/dashboard',
            meta: {
                title: '控制中心',
                subTitle: 'Dashboard',
                icon: DashboardOutlined,
                tag: {color: '#f50', content: 'Hot'}
            }
        }, {
            // ... sider menus
        }
    ])
</script>

登录页面

<template>
    <mi-login action="/v1/login" />
</template>

注册页面

<template>
    <mi-register action="/v1/register" />
</template>

更多应用

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

Empty file

About

A unified template used to backend management based on Vue3.0 + Ant Design Vue + Vite。Makeit Admin Pro,是基于 Vue3.0 + Vite + Ant Design Vue 组件库开发的一套适合中后台管理项目的统一 UI 框架,包含页面布局 / 注册 / 登录 / 验证码等常用模块,开箱即用。持续开发更新中 ... expand collapse
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
TypeScript
1
https://gitee.com/wildidea/miitvip-vue-admin-manager.git
git@gitee.com:wildidea/miitvip-vue-admin-manager.git
wildidea
miitvip-vue-admin-manager
miitvip-vue-admin-manager
master

Search