Giter VIP home page Giter VIP logo

cmdparkour / vue-admin-box Goto Github PK

View Code? Open in Web Editor NEW
1.7K 12.0 272.0 18.45 MB

vue3,vite,element-plus中后台管理系统,集成四套基础模板,大量可利用组件,模板页面

Home Page: https://cmdparkour.github.io/vue-admin-box/dist

License: MIT License

HTML 0.09% Vue 60.82% SCSS 1.05% TypeScript 38.05%
vuex typescript admin vue3 vue-next vite element-plus vue admin-dashboard admin-template vue-admin

vue-admin-box's Introduction

vue-admin-box

vue element-plus vite typescript license

English | 简体中文

summary

  • update version
  • After more than three months of iteration, version 1.0 was officially released on August 10, 2021, with four basic templates attached for everyone to use
  • This open source project is developed by individuals and does not restrict any commercial use or personal research. Please click star to encourage me before using it
  • All illegal and pornographic activities involved in this open source project have nothing to do with this source code. Please do not show yourself
  • QQ communication group:912804007,Problems are raised in the group and can be solved in time

Preview

if you are not in China, maybe you should download the project to show the demo or use a vpn to visit the online demo.

Basic Template

There are four basic templates, which are suitable for zero development and use, and can be found in githubgitee View directly in the warehouse,The template is shown below:

  1. template-ts-i18n template,container ts and internationalization github gitee demo
  2. template-ts template,container ts,internationalization is not container github gitee demo
  3. template-js-i18n template,container js and internationalization github gitee demo
  4. template-js template,container js,internationalization is not container github gitee demo

Introduction

vue-admin-box is a free and open source background management system template。The latest vue-next, vite, element-plus used in this project. The purpose is to solve the complex configuration of background system in general business。

Characteristic function

  • Routing configuration, state management mechanism (State supports local storage by default), encapsulated and perfect Axios and API management mechanism suitable for middle and background development
  • It is very convenient to expand the theme configuration function, and supports three typical middle and background styles by default
  • Routing configuration, state management mechanism (State supports local storage by default), encapsulated and perfect Axios and API management mechanism suitable for middle and background development
  • For the three typical business tables of adding, deleting and modifying query, please see "CRUD table", "category table" and "tree table" in the "page column" for details
  • The refresh function without route jump supports cache page refresh. At present, most frameworks do not support cache page refresh
  • It is a convenient and extensible internationalization solution, and provides two sets of non internationalized basic templates and two sets of internationalized basic templates (TS version / JS version)
  • Handwritten versions of various custom instructions
  • For table common components and pop-up common components that have been verified by multiple middle and background businesses, please see "crud table", "category table" and "tree table" in the "page column" for details

Main technology

  • MVVM framework:vue v3
  • Engineering Management:vite v2
  • UI framework:element-plus
  • Router manage:vue-router v4
  • State Manage :vuex v4
  • Data request:axios
  • Utility library:@vueuse/core

How to use

  1. get the source code project

    git clone https://github.com/cmdparkour/vue-admin-box.git
    
  2. install dependence, you can use cnpm or yarn in China

    npm install
    
  3. run in the development

    npm run dev 或 npm run start
    
  4. build in production

    npm run build
    

Partner project

preview

vue-admin-box's People

Contributors

baifangzi avatar banana-energy avatar cmdparkour avatar cute001 avatar jingtao-li avatar yaroed avatar yirius 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

vue-admin-box's Issues

**风主题的优化

目前感觉有点丑,欢迎大家来Pull Reeuests,每一项我都会认真下载下来看的

Docker中启动失败

[email protected] dev
vite

vite v2.6.14 dev server running at:

Local: http://localhost:3001/
Network: http://172.17.0.5:3001/

ready in 504ms.

node:events:368
throw er; // Unhandled 'error' event
^

Error: spawn xdg-open ENOENT
at Process.ChildProcess._handle.onexit (node:internal/child_process:282:19)
at onErrorNT (node:internal/child_process:477:16)
at processTicksAndRejections (node:internal/process/task_queues:83:21)
Emitted 'error' event on ChildProcess instance at:
at Process.ChildProcess._handle.onexit (node:internal/child_process:288:12)
at onErrorNT (node:internal/child_process:477:16)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
errno: -2,
code: 'ENOENT',
syscall: 'spawn xdg-open',
path: 'xdg-open',
spawnargs: [ 'http://localhost:3001/' ]
}
[root@CentOS8 vue-admin-box]#

版本如下
[root@CentOS8 vue-admin-box]# node -v
v16.13.0
[root@CentOS8 vue-admin-box]# npm -v
8.1.0

Demo site is different from github code

The demo runs well. But when I use source code from Github or Gitee, there are some problems.
1-DialogBox cannot move up/down.
2-Missing the green loading icon in top-right. Is it different version?

封装的表格显示有点问题

表格中操作栏存在显示问题,会多出来一条横线,
必现,复现场景:进入分类联动表格页面,点击面包屑导航切换到其他页面,再切换回来,表格中底部操作栏的短横线就会多出来

启动项目报错

[vite] Internal server error: ENOENT: no such file or directory, scandir 'D:\AJetBriains\Code1\vue-admin-box-3-22-\src\assets\svg'

at Object.readdirSync (node:fs:1438:3)
at D:\AJetBriains\Code1\vue-admin-box-3-22-\node_modules@webxrd\vite-plugin-svg\lib\index.js:33:16
at Array.forEach ()
at getAllSvgFileName (D:\AJetBriains\Code1\vue-admin-box-3-22-\node_modules@webxrd\vite-plugin-svg\lib\index.js:32:14)
at D:\AJetBriains\Code1\vue-admin-box-3-22-\node_modules@webxrd\vite-plugin-svg\lib\index.js:115:25
at Context.load (D:\AJetBriains\Code1\vue-admin-box-3-22-\node_modules@webxrd\vite-plugin-svg\lib\index.js:204:23)
at Object.load (D:\AJetBriains\Code1\vue-admin-box-3-22-\node_modules\vite\dist\node\chunks\dep-689425f3.js:39293:50)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async doTransform (D:\AJetBriains\Code1\vue-admin-box-3-22-\node_modules\vite\dist\node\chunks\dep-689425f3.js:49982:24)

  该怎么解决,求大佬救助

[vite] Internal server error: (0 , import_vite.transformWithEsbuild) is not a function

嗨,我这边
cnpm install
npm run dev
报如下错误:
3:05:24 PM [vite] Internal server error: (0 , import_vite.transformWithEsbuild) is not a function
Plugin: vite:vue
File: /vue-admin-box/src/App.vue

at transformMain (/vue-admin-box/node_modules/_@[email protected]@@vitejs/plugin-vue/dist/index.js:4519:83)
at async Object.transform (/vue-admin-box/node_modules/_vite@2.3.7@vite/dist/node/chunks/dep-bc228bbb.js:44765:30)
at async transformRequest (/vue-admin-box/node_modules/_vite@2.3.7@vite/dist/node/chunks/dep-bc228bbb.js:59029:29)
at async viteTransformMiddleware (/vue-admin-box/node_modules/_vite@2.3.7@vite/dist/node/chunks/dep-bc228bbb.js:59167:32)

无法正常访问.

子菜单只有一级的时候

子菜单只有一个,同时子菜单的子菜单有多个,这时候在菜单上只会显示两层菜单,但实际层级是三层
层级如下

----menu
    ---menu-1
       ---menu-1-1
       ---menu-1-2

这种层级的时候顶层的菜单不会显示,会被menu-1替换,如果添加一个和menu-1平行的menu-2,就会正常显示menu

动态加载菜单刷新会404

版本是JS国际版
在router/index.js
方法 addRoutes 中请求后台数据加载菜单

一切都正常,唯一不足的是 F5刷新跳转到404页面。 虽然还是可以点击菜单回到页面,但是考虑到用户体验,还是想问问有什么办法可以修复...

runtime-core.esm-bundler.js:40 [Vue warn]: Property "data" was accessed during render but is not defined on instance.

runtime-core.esm-bundler.js:40

   [Vue warn]: Property "data" was accessed during render but is not defined on instance. 

at <ElTableBody context= {uid: 400, vnode: {…}, type: {…}, parent: {…}, appContext: {…}, …} highlight=false row-class-name=undefined ... >
at <ElTable data= (15) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] >
at <ElOverlay mask=true overlay-class=undefined z-index=2015 ... >
at <BaseTransition onAfterEnter=fn onAfterLeave=fn onBeforeLeave=fn ... >
at <Transition name="dialog-fade" onAfterEnter=fn onAfterLeave=fn ... >
at <ElDialog title="提示" modelValue=false onUpdate:modelValue=fn ... >
at
at <VueAdminBox$1683044433667 onVnodeUnmounted=fn ref=Ref< Proxy {…} > key="/batchmng/batchrun" >
at <KeepAlive key=0 include= (4) ['vueAdminBox$1683044430203', 'vueAdminBox$1683044432684', 'vueAdminBox$1683044433115', 'vueAdminBox$1683044433667'] >
at <BaseTransition mode="out-in" appear=false persisted=false ... >
at
at
at
at
at <ElContainer style= {height: '100vh'} >
at <Index onVnodeUnmounted=fn ref=Ref< Proxy {…} > >
at
at <ElConfigProvider locale= {name: 'zh-cn', el: {…}} >

作者大大升级一下element-plus的版本吧,好像有bug,我本地想使用


{{ handledata(data) }}


传入的data为空的对象

npm run dev无法启动

The following dependencies are imported but could not be resolved:

highlight.js (imported by /Users/keyin/code/vite/vue-admin-box/src/views/main/components/mdEditor/index.vue?id=0)

Are they installed?

出现上面的提示

按钮权限

请问按钮权限能控制吗,还是说需要我自己扩展

关于基础模板的使用说明

先建议大家固定一下vite和element-plus的依赖,这个模板的更新确定挺费时间的,基本每次更新都是需要在demo版本解决一系列优化之后才会更新至最新版本的,所以会出现依赖不兼容的情况,大家可以先行固定版本,之前版本的基础模板核心功能已经是具备的,只是没有兼容到最新的vite和element-plus写法才会出现运行失败的情况。
如果大家有什么好的更新方案可以在下方说明,感谢您的使用

tabs 滚轮滚动不兼容触控板

滚动事件中获取到的 e.wheelDelta 在鼠标滑轮滚动时稳定为120,但是触控板滑动时是介于-10和10之间的。
导致触控板滑动时会出现tabs闪烁。

经过测试,限制当e.wheelDelta处于-30和30之间可以比较有效的解决问题

ts检查的相关优化

可不可以先把项目中ts类型检查相关的报错处理一下,小白打开页面就一片红,怕怕
image

Form validation not refresh

1st validation is correct when we submit blank form. However, after changing the data in select (dropdown), the validation alert is still there.
photo_2021-11-12_09-45-18

tagview多标签切换问题

我在列表页点击进去详情页会传query参数,但我又从详情页点击tag回到列表页,此时详情页未关闭,我又从列表页点击tag回到列表页,我传的参数不见了???你源码这样子写肯定会有问题的

{{ $t(menu.meta.title) }}

添加相关规范建议

希望可以添加相关规范,比如代码规范,提交规范,还有参与项目规范

Can't get the project up and running...

I tried to clone the template from

https://github.com/cmdparkour/vue-admin-box-template

I seem to get to to of errors and could get it up and running, can someone check it?

建议修改限定依赖版本范围

报错Uncaught SyntaxError: The requested module '/node_modules/.vite/vue.js?v=9f6682f3' does not provide an export named 'createElementBlock'

项目clone下来运行报错

master分支

  1. 首先是MenuItem.vue里面包menu.meta.hideMenu不存在
  2. 问题1修改后报下面的错误
    Uncaught (in promise) DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('sfont system-home') is not a valid name.

开发分支

  1. 导入不了element-plus的dialog
    image
    image

功能建议:tabs方法提取出来,可设置是否多开

tabs方法提取出来
就是把头部的那些tabs的操作方法提取出来,关闭左侧,关闭右侧,关闭当前,刷新当前...,方便在tab内容页导入直接使用

可设置是否多开
比如,相同的组件页,设置multiple:true/false 是否多开,就是说详情页,内容结构是一样的,可设置不打开多个tab页,而是直接在已打开的tab页中显示

{
  path: 'detail/:id',
  component: createNameComponent(() => import('@/views/product/detail.vue')),
  meta: { title: '产品详情', multiple:true, cache: false, roles: ['admin', 'editor'] }
}

axios功能添加在哪

你好,请问我想加入接口请求,是在vue文件里加axios吗,替换掉options,刚学前端,不是很确定

2024-04-02_175400

Error detected by console

I noticed the following error when inspect:

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT (https://hm.baidu.com/hm.js?bd78bc908e66174e7dde385bf37cb4c1)

index.vue:160 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'querySelector')
at setPosition (index.vue:160)
at index.vue:153

Looks like it relates to src/layout/Tabs/index.vue (line 160)
Please help checking. Thank you!

handleReload不触发onActivated

onActivated勾子中有一些获取页面数据的操作.
刷新,会清空数据状态,但是却不触发onActivated勾子.
导致刷新就丢失数据.
如何解决?

store存储问题

当state中新增一个,localstorage中不会更新,只有触发mutation才会

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.