加入CODE CHINA

· 不限速    · 不限空间    · 不限人数    · 私仓免费

免费加入
    README.md

    vue element-ui Build Status license GitHub release

    💎 Vue自动化管理系统

    简体中文 | English

    介绍

    nx-admin 是一个开源的管理系统前端集成方案,它基于 vueelement。它使用了最新的前端技术栈,内置了i18国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。最大程度上帮助个人,企业节省时间成本和费用开支。

    中文文档

    完整版

    Github 仓库 | 码云仓库 | github预览地址 | gitee预览地址

    nx-admin

    简化版

    Github 仓库 | 码云仓库 | 预览地址

    前序准备

    你需要在本地安装 nodegit。本项目技术栈基于 ES2015+vuevuexvue-routeraxioselement-ui,所有的请求数据都使用Mock.js模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。

    相关文档

    老板让我十分钟上手nx-admin

    Vue2.0实现的用户权限控制

    Mock.js模拟登录和表格的增删改查

    Vue2.0-基于elementui换肤[自定义主题]

    Vue国际化处理 vue-i18n 以及项目自动切换中英文

    搭建 Vue2 单元测试环境(karma+mocha+webpack3)

    Vue实现首屏加载等待动画

    Vue项目中添加锁屏功能

    Vue项目添加动态浏览器头部title

    本项目不支持低版本浏览器(如 ie),有需求请自行添加 polyfill 详情

    注意:该项目使用 element-ui@2.3.0+ 版本,所以最低兼容 vue@2.5.0+

    下载

    git:git clone https://github.com/mgbq/nx-admin.git

    npm:npm install

    演示

    测试账号:

    1. username: admin
       password: 任意
    2. username: editor
       password: 任意

    演示地址:

    vue实现的后台管理系统

    nx-admin project

    nx-admin 是完全开源免费的管理系统集成方案,由 nxmin 在工作之余由兴趣驱动完成,如果你也一样喜欢前端开发,欢迎加入我们的讨论/学习群,群内可以提问答疑,分享学习资料或者随便扯淡

    技术答疑,交流QQ群

    群号 493671066 这里可以帮你答疑nx-admin这个项目各种疑惑,问题,防止发广告者,入群费设置为0.9元,请谅解,欢迎大家

    chat

    其他注意事项

    一、如果我不想用到上面的紫色颜色,那我怎么修改为自己喜欢的颜色呢?

    第一步: 修改代码地址为:src/styles/variables里面的//sidebar注释部分

    第二步: 修改代码地址为:src/views/layout/components/Sidebar/index.vue下面部分颜色代码即可。

    <el-menu
          mode="vertical"
          :show-timeout="200"
          :default-active="$route.path"
          :collapse="isCollapse"
          background-color="#6959CD"
          text-color="white"
          active-text-color="#42b983"
        >

    二、如果我不想用到刷新加载动画怎么做呢?

    把index.html里面相关的loader-wrappe 加载动画div 和相关css去掉即可。

    三、如果我不想用到上面的某些组件呢,那我怎么在模板中删除掉不影响到其他功能呢?

    举个栗子,我不想用 Vue-Quill-Editor 这个组件,那我需要分三步走。

    第一步:删除该组件的路由,在目录 src/router/index.js 中,找到引入改组件的路由,删除下面这段代码。

      {
            path: 'VueEditor',
            name: 'VueEditor',
            component: () => import('@/views/form/VueEditor'),
            meta: { title: 'VueEditor' }
      },

    第二步:删除引入该组件的文件。在目录 src/view/form/ 删除 VueEditor.vue 文件。

    第三步:卸载该组件。执行以下命令:

    npm un vue-quill-editor -S

    完成。

    功能

    - 登录 / 注销
    
    - 权限验证
      - 页面权限
      - 指令权限
    
    - 多环境发布
      - dev sit stage prod
    
    - 全局功能
      - 国际化多语言
      - 锁屏
      - 疑问
      - 转到github
      - 多种动态换肤
      - 动态侧边栏(支持多级路由嵌套)
      - 动态面包屑
      - 快捷导航(标签页)
      - Svg Sprite 图标
      - 本地mock数据
      - Screenfull全屏
      - 自适应收缩侧边栏
    
    - 编辑器
      - 富文本
      - Markdown
    
    - Excel
      - 导出excel
      - 导出zip
      - 导入excel
      - 前端可视化excel
    
    - 表格
      - 树形表格
      - 内联编辑
    
    - 错误页面
      - 401
      - 404
    
    - 組件
      - 返回顶部
      - 拖拽Dialog
      - 拖拽看板
      - 列表拖拽
      - SplitPane
      - Dropzone
      - Sticky
      - CountTo
    
    - 综合实例
    - Dashboard
    - v-charts 图表
    - Clipboard(剪贴复制)
    - Markdown2html
    - 首屏加载等待动画
    - Fontawesome 图标库
    - vuex本地持久化存储,封装h5的sessionStorage和localStorage
    - 右键菜单
    - github-emoji
    - 第三方网站
    - 动态文字说明
    

    欢迎你为 nx-admin的开发作出贡献(代码编写/文档翻译)。

    开发

    # 克隆项目
    git clone https://github.com/mgbq/nx-admin.git
    
    # 安装依赖
    npm install
       
    # 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
    npm install --registry=https://registry.npm.taobao.org
    
    # 启动服务
    npm run dev

    浏览器访问 http://localhost:9528

    发布

    # 构建测试环境
    npm run build:sit
    
    # 构建生产环境
    npm run build:prod

    其它

    # --report to build with bundle size analytics
    npm run build:prod --report
    
    # --preview to start a server in local to preview
    npm run build:prod --preview
    
    # lint code
    npm run lint
    
    # auto fix
    npm run lint -- --fix

    捐赠 觉得不错 赏个咖啡 让作者打起精神 ~

    捐赠扫一扫

    感谢

    这个项目借鉴了vueAdmin-template,d2admin, avue部分组件。

    License

    MIT Copyright (c) 2018-present nxmin

    项目简介

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com/mgbq/nx-admin

    发行版本 6

    fix svg bug

    全部发行版

    贡献者 3

    开发语言

    • Vue 54.8 %
    • CSS 30.6 %
    • JavaScript 13.9 %
    • HTML 0.8 %