Giter VIP home page Giter VIP logo

nx-admin's Introduction

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 详情

注意:该项目使用 [email protected]+ 版本,所以最低兼容 [email protected]+

下载

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

nx-admin's People

Contributors

fairyever avatar mgbq avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

nx-admin's Issues

动画在IOS上没有效果

动画在安卓手机上可以正确显示,但是用IOS手机的时候不会显示,是什么原因啊?

您好,作者!

您好,首先感谢您的付出,这套代码非常好,但是美中不足组的地方是您的组件缺少描述,我如果要使用它们必须得阅读您的代码,能否在组件里面把api维护进去,最后再次谢谢您的付出。

API配置

你好,请问最新的nx-admin中,后端api地址如何配置, 没有文档中config文件
image
我这样配置了下,好像不行

动态路由,菜单权限

一级菜单设置成roles: ['admin', 'editor'],二级菜单,某些权限只能是admin,某些权限只能是editor,换句话说,二级菜单某些只能管理员可见,某些只能普通用户可见。但是左侧菜单依然能看的到只能editor只见的菜单,并且能访问。请问这是bug吗?
image
已上图中的directive菜单管理员也能看到,其实只能普通用户可见。求解答

如何整合到花裤衩的框架

您好,看了您封装的框架,非常好,后悔没早看到,但是我们已经在用花裤衩的框架了,请问该怎么把您的框架整合进来?

请问svg icon 怎么调整尺寸

仔细看了下 svg icon 在svg 的xml 中有 width 、height和 viewBox 两个参数可以调整svg本身的尺寸。但是在nx-admin中貌似是被限制了,14px * 14px 不能更改。从iconfont拿来的图标看起来整体都偏小,请问要svg icon的尺寸大小怎么调整?

VUE_APP_BASE_API 无效

配置了.env.development VUE_APP_BASE_API = '/api'
但实际请求没有生效,是否还有其他地方需要配置
周时配置了一个BASE_API但是在main.js中打印为undefined

日志打印结果

process.env.BASE_API =  undefined
main.js:112 process.env.VUE_APP_BASE_API =  /api

实际请示路径并没有加上/api根路径

mock.js:8359 POST http://192.168.2.24:9528/Apps/createTourist 404 (Not Found)
send @ mock.js:8359
dispatchXhrRequest @ xhr.js:160
xhrAdapter @ xhr.js:11
dispatchRequest @ dispatchRequest.js:59
Promise.then (async)
request @ Axios.js:51
wrap @ bind.js:9
testReq @ login.js:44
(anonymous) @ user.js:157
testReq @ user.js:156
wrappedActionHandler @ vuex.esm.js:721
dispatch @ vuex.esm.js:428
boundDispatch @ vuex.esm.js:322
(anonymous) @ userlogin.vue?fb7d:116
(anonymous) @ element-ui.common.js:22987
(anonymous) @ element-ui.common.js:23505
complete @ index.js:89
(anonymous) @ index.js:225
next @ util.js:148
next @ util.js:116
cb @ index.js:173
string @ string.js:31
(anonymous) @ index.js:216
next @ util.js:114
cb @ index.js:173
required @ required.js:8
(anonymous) @ index.js:216
next @ util.js:114
asyncSerialArray @ util.js:120
(anonymous) @ util.js:154
asyncMap @ util.js:151
validate @ index.js:141
validate @ element-ui.common.js:23501
(anonymous) @ element-ui.common.js:22981
validate @ element-ui.common.js:22980
handleLogin @ userlogin.vue?fb7d:111
click @ userlogin.vue?5a73:137
invokeWithErrorHandling @ vue.runtime.esm.js:1854
invoker @ vue.runtime.esm.js:2179
original._wrapper @ vue.runtime.esm.js:6911
Show 9 more frames
request.js:71 errError: Request failed with status code 404
createError.js:16 Uncaught (in promise) Error: Request failed with status code 404
    at createError (createError.js:16)
    at settle (settle.js:18)
    at MockXMLHttpRequest.handleLoad [as onreadystatechange] (xhr.js:59)
    at MockXMLHttpRequest.dispatchEvent (mock.js:8472)
    at XMLHttpRequest.handle (mock.js:8300)

Tab 切换数据丢失

页面中tab切换会导致数据丢失,但如果使用keep-alive是无法销毁组件,想请教下有没有更好的思路_

您好

我最近需要用到element-ui的最近组件,所以我把它升级到2.8.2
但是升级之后出现 页面加载不出来 卡死的情况 这种情况怎么解决

锁屏解锁后的跳转

锁屏这个功能很好用,可是有个问题,解锁回来去dashboard了,感觉应该回到锁屏前的tagview比较合理呢。

第三方网站

第三方网站的页面,整个frame没有充满页面,下面留出很多空白,影像美观

关于跨域请求

如果关闭mock数据,请求后台数据接口在哪里配置?支持跨域

关于权限

动态菜单的加载是从router里面获取的,那么请问一下,您是事先将asyncRouterMap中的路由写死了,然后在通过后端判断role来获取对应的动态路由,可以这样理解么,因为项目前端人手不够,被迫来开发前端,对这块的理解还是不怎么到位,麻烦能说明下么

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.