Giter Club home page Giter Club logo

lss5270 / vue-manage-system-plus Goto Github PK

View Code? Open in Web Editor NEW
91.0 91.0 22.0 10.98 MB

采用Vue3 + Element Plus 搭建的后台管理系统解决方案,基于vue-manage-system开源系统升级改造而成,企业级定制,注释清晰,快速上手,开箱即用。

Home Page: https://lss5270.github.io/vue-manage-system-plus-demo/

License: MIT License

JavaScript 42.66% HTML 0.50% Vue 53.80% CSS 3.04%
element management-system mock vue vue-cli vue-manage-system-plus vue3 vue3-element

vue-manage-system-plus's Introduction

vue-manage-system-plus

vue element-ui license

采用Vue3 + Element Plus 搭建的后台管理系统解决方案,基于vue-manage-system升级定制而成,企业级定制,注释清晰,快速上手,开箱即用。线上地址

前言

vue发布3.0已经有一段时间了,一直想练练手。github上搜了一下,只有vue-manage-system比较符合拿来练手,工程简洁不像其他开源项目那么臃肿,但是还有以下几个方面不太符合企业级应用需求:

  • vuex未进行模块拆分(需拆分管理,已拆分)
  • 登录、登出未使用vuex状态管理模式(已加)
  • 缺少eslint自定义规则校验(已加)
  • 没有发送api接口请求(已加,但采用mock模拟接口返回数据,实际开发时去掉main.js中的mock模块即可)
  • 缺少api请求的公共入参封装、以及回参统一拦截和过滤处理等(企业级应用必带公共入参,已加)
  • 路由全部写死在代码中,没有注册动态路由(1.可通过接口获取,然后注册动态路由。2.可自动注册views文件夹,然后通过导航守卫beforeEach判断to页面是否在已分配的菜单权限中。为了方便调试和多人开发,此版本采用方案2)
  • 左侧菜单sidebar.vue组件没有渲染动态数据菜单(已改造,通过api请求菜单接口,根据不同角色返回不同的动态菜单进行动态渲染)
  • 业务中的语法大多数都还是vue2.0语法(登录等业务启用3.0语法,尝鲜并踩坑)
  • 未加入常用混入、过滤器、全局方法封装等(已加)
  • 缺少全局的403、404路由重定向,防止用户随意、恶意敲链接(已加)
  • 缺少白名单页面配置、以及系统配置(已加)
  • 缺少基建组织机构模块(机构部门、角色、用户、菜单分配等)(因为每个公司都会有机构、权限分配)
  • 缺少侧边栏自适应浏览器窗口大小(已加)
  • 缺少动态角色演示(已加,admin账号返回8个菜单,user账号返回4个菜单)
  • 国际化(已加。只在国际化功能页面做了示例,若需要全系统国际化,参照此页面即可)

以上打勾的代表个人已经改造完成,使其更贴切企业应用,免费开源,可以为广大开发爱好者减少框架底层搭建成本、节省时间,即使是后端开发人员也能轻易上手,开箱即用。

项目截图

登录(小屏不清晰可以下载图片预览)

(admin账号返回8个菜单,user账号返回4个菜单)

Image text

账号错误提示

Image text

admin账号登录返回8个菜单

Image text

user账号登录返回4个菜单

Image text

403和404重定向(小屏不清晰可以下载图片预览)

演示三种链接敲击情况:

  1. 敲击已存在并且已授权的路由(直接进入路由)
  2. 敲击已存在但是未授权的路由(重定向到403)
  3. 敲击不存在的路由(重定向到404)

Image text

赞赏

请作者喝杯咖啡吧!(微信号:)

系统介绍

该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发。基于 Vue3,使用 vue-cli3 脚手架,引用 Element Plus 组件库,方便开发快速简洁好看的组件。分离颜色样式,支持手动切换主题色,而且很方便使用自定义主题色。

功能

  • Element Plus
  • 登录/注销
  • Dashboard
  • 表格
  • Tab 选项卡
  • 表单
  • 图表 📊
  • 富文本编辑器
  • markdown 编辑器
  • 图片拖拽/裁剪上传
  • 支持切换主题色 ✨
  • 列表拖拽排序
  • 权限测试
  • 404 / 403
  • 三级菜单
  • 自定义图标
  • 可拖拽弹窗
  • 国际化

安装步骤

git clone https://github.com/lss5270/vue-manage-system-plus.git      // 把模板下载到本地
cd vue-manage-system-plus    // 进入模板目录
npm install 或 npm ci        // 安装项目依赖,等待安装完成之后,安装失败可用 cnpm 或 yarn

// 开启服务器,浏览器访问 http://localhost:8080
npm run serve

// 执行构建命令,生成的dist文件夹放在服务器下即可访问
npm run build

License

MIT

vue-manage-system-plus's People

Contributors

lss5270 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

Watchers

 avatar  avatar

vue-manage-system-plus's Issues

You may need an additional loader to handle the result of these loaders.

  • 已使用 npm install --verbose 安装依赖,然后用 npm run serve 抛错,项目跑不起来
    image
hgp@hgp-MS-7B89:~/workspace/nodejs/vue-manage-system-plus$ 
hgp@hgp-MS-7B89:~/workspace/nodejs/vue-manage-system-plus$ npm run serve

> [email protected] serve /home/hgp/workspace/nodejs/vue-manage-system-plus
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                                                                                                                                                                                                                              11:37:57 ├F10: PM┤

 error  in ./src/views/login.vue?vue&type=template&id=7589b93f&scoped=true&ts=true

Module parse failed: Unexpected token (13:48)
File was processed with these loaders:
 * ./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js
 * ./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js
 * ./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js
You may need an additional loader to handle the result of these loaders.
| _popScopeId()
| 
> export const render = /*#__PURE__*/_withId((_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) => {
|   const _component_el_button = _resolveComponent("el-button")
|   const _component_el_input = _resolveComponent("el-input")

 @ ./src/views/login.vue?vue&type=template&id=7589b93f&scoped=true&ts=true 1:0-346 1:0-346
 @ ./src/views/login.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.114:8083&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

cretae 报错了,有人看下吗?

canjian:~ laogao$ vue create vue-manage-system-plus

Vue CLI v5.0.8
? Target directory /Users/laogao/vue-manage-system-plus already exists. Pick an action: Merge

Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)

Vue CLI v5.0.8
✨ Creating project in /Users/laogao/vue-manage-system-plus.
⚙️ Installing CLI plugins. This might take a while...

npm ERR! code ETIMEDOUT
npm ERR! syscall connect
npm ERR! errno ETIMEDOUT
npm ERR! network request to http://192.168.10.107:8081/repository/npm-public/normalize-wheel/-/normalize-wheel-1.0.1.tgz failed, reason: connect ETIMEDOUT 192.168.10.107:8081
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/laogao/.npm/_logs/2023-08-16T16_20_33_112Z-debug-0.log
ERROR Error: command failed: npm install --loglevel error --legacy-peer-deps
Error: command failed: npm install --loglevel error --legacy-peer-deps
at ChildProcess. (/Users/laogao/.nvm/versions/node/v16.20.1/lib/node_modules/@vue/cli/lib/util/executeCommand.js:138:16)
at ChildProcess.emit (node:events:513:28)
at maybeClose (node:internal/child_process:1100:16)
at Process.ChildProcess._handle.onexit (node:internal/child_process:304:5)
canjian:~ laogao$ node -v
v16.20.1
canjian:~ laogao$ npm -v
8.19.4
canjian:~ laogao$ vue -V
@vue/cli 5.0.8
canjian:~ laogao$

安装编译后提示这个报错怎么解决呢

` error in ./src/views/login.vue?vue&type=template&id=7589b93f&scoped=true&ts=true

Module parse failed: Unexpected token (13:48)
File was processed with these loaders:

  • ./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js
  • ./node_modules/cache-loader/dist/cjs.js
  • ./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js
    You may need an additional loader to handle the result of these loaders.
    | _popScopeId()
    |

export const render = /#PURE/_withId((_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) => {
| const _component_el_button = _resolveComponent("el-button")
| const _component_el_input = _resolveComponent("el-input")

@ ./src/views/login.vue?vue&type=template&id=7589b93f&scoped=true&ts=true 1:0-316 1:0-316
@ ./src/views/login.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.0.125:8082&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
`

以上是执行npm run serve 后报错情况,实在不知道怎么解决了

vite

希望
当前版本升级 到 vite2
例外一个ts版本

关于页面tab刷新和切换的问题

作者好!十分感谢有这个项目,之前没有接触过vue,属于新人,正在学习使用。现在有几个小问题请教一下。
1、点击左侧几个图标,可打开不同的页面,我在table页面输入一些数据时,切换到另外的页面,再切回来,我加的数据不见的,相当于table页面重新加载。如何实现可保留原页面已输入的数据呢?
2、当打开多个页面时,如果按F5刷新,会删除其它页面,只保留当前页面,这个是本身的特性,还是可以实现保留所有页面?

新手上路,可能有点冒昧。再次感谢!

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.