Code Monkey home page Code Monkey logo

vue-vben-admin's Introduction

VbenAdmin Logo

license

Vue vben admin

English | 中文

Introduction

Vue Vben Admin is a free and open source middle platform/back-end template. Using the latest vue3, vite4, TypeScript and other mainstream technology, Vben is the out-of-the-box front-end solution for both production and learning purpose.

Features

  • State-of-art Techinical Stack:Using the latest and popular front-end technology such as Vue3/vite2
  • TypeScript: Application-level JavaScript language
  • Theming: Configurable themes
  • International:Built-in i18n support
  • Response Mock: Built-in response mock ability
  • Authority: Built-in permission system based on dynamic routes.
  • Component: Extracted and encapsulated components for various scenarios.

Preview

Test account: vben/123456

VbenAdmin Logo VbenAdmin Logo VbenAdmin Logo

Use Gitpod

Open the project in Gitpod (free online dev environment for GitHub) and start coding immediately.

Open in Gitpod

Documentation

Document

Preparation

  • node and git - Project development environment
  • Vite - Familiar with vite features
  • Vue3 - Familiar with Vue basic syntax
  • TypeScript - Familiar with the basic syntax of TypeScript
  • Es6+ - Familiar with es6 basic syntax
  • Vue-Router-Next - Familiar with the basic use of vue-router
  • Ant-Design-Vue - ui basic use
  • Mock.js - mockjs basic syntax

Install and use

  • Get the project code
git clone https://github.com/anncwb/vue-vben-admin.git
  • Install dependencies
cd vue-vben-admin

pnpm install
  • run
pnpm serve
  • build
pnpm build
  • docker

The dockerFile is located in the project root directory and supports differential deployment

build image

docker build -t vue-vben-admin .

Use environment variables to achieve differentiated container deployment. Specify service endpoint by assigning VG_BASE_URL. In the following example, http://localhost:3333 is used as the back-end service address and the container is mapped to port 6666:

docker run --name vue-vben-admin -d -p 6666:80  -e VG_BASE_URL=http://localhost:3333 vue-vben-admin

Then you can navigate to http://localhost:6666

Change Log

CHANGELOG

Project

How to contribute

You are very welcome to join!Raise an issue or submit a Pull Request。

Pull Request:

  1. Fork code!
  2. Create your own branch: git checkout -b feat/xxxx
  3. Submit your changes: git commit -am 'feat(function): add xxxxx'
  4. Push your branch: git push origin feat/xxxx
  5. submitpull request

Git Contribution submission specification

  • reference vue specification (Angular)

    • feat Add new features
    • fix Fix the problem/BUG
    • style Modify the code style/format that does not affect the feature
    • perf Optimization/performance improvement
    • refactor Refactor
    • revert Undo edit
    • test Test related
    • docs Documentation/notes
    • chore Dependency update/scaffolding configuration modification etc.
    • workflow Workflow improvements
    • ci Continuous integration
    • types Type definition file changes
    • wip In development

Related warehouse

If these plugins are helpful to you, you can show support by leaving a star!

Browser support

The Chrome 80+ browser is recommended for local development

Support modern browsers, doesn't include IE

 Edge
IE
 Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
not support last 2 versions last 2 versions last 2 versions last 2 versions

Maintainer

@Vben @Jinmao

Thanks

JetBrains Logo (Main) logo.

Star History Chart

Star History Chart

License

MIT © Vben-2020

vue-vben-admin's People

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

vue-vben-admin's Issues

为什么src别名用的/@/*?

大部分人开发 vue 后台接触的都是源于 vue-element-admin,项目路径别名是 @/,看 /@/ 很不习惯,总以为写错了。

Form组件resetFields没有设置为defaultValue并重新发起请求

async function resetFields(): Promise<any> {
      const { resetFunc } = unref(getProps);
      resetFunc && isFunction(resetFunc) && (await resetFunc());
      const formEl = unref(formElRef);
      if (!formEl) return;
      Object.keys(formModel).forEach((key) => {
        (formModel as any)[key] = undefined;
      });
      setFieldsValue(unref(defaultValueRef));  // 新加
      emit('reset', toRaw(formModel));
      handleSubmit(); // 新加
    }

Expected behaviour

点击重置按钮,筛选条件恢复默认或清空,并发起请求

My resolution

代码如上

布局问题报告

截止到2.0.0-rc.10:
导航栏模式设置为混合模式,且开启分隔菜单时
1、菜单折叠按钮设置为不显示或在底部显示时,顶部的logo右侧原来的折叠按钮的占位没有去除,会多出一部分空白
image
2、左侧菜单在折叠状态时,顶部的LOGO部分没有自动缩小为图标状态,并且左侧菜单项因为没有图标而显示不正常(开启“折叠菜单显示名称”选项后此问题解决)。希望LOGO部分在左侧菜单折叠时也能像“左侧菜单导航模式”那样自动缩小到只剩下一个图标。
image

角色权限控制

名称:角色权限控制
要求:能不能出个基于前端,基于后端的类似表格demo,主要对ts和vue3.0语法不熟。感谢~

vuex的书写方式?

想请教下作者,vuex如果想用ts,除了vuex-module-decorators装饰器那种写法,还有别的组织方式吗?感觉那样写着太难受了

vite case files path wrong

Subject of the issue

有两处地方应用了包文件里面的内容,vite在路径前会自动加上@modules,但是不直接引用包名的话会导致它添加路径出错,具体如截图
微信截图_20201010150946

import 'ant-design-vue/dist/antd.css';

微信截图_20201010150858

[vite] Failed to resolve module import "ant-design-vue/dist/antd.css-vben-adminode_modulesant-design-vuedistantd.css". (imported by /@/setup/ant-design-vue/index.ts)

如上图引用包内部的文件时,会导致下图自动修改路径出问题,我不确定vite是否有针对这种情况的设置。改成相对路径项目才能正常打开。

Your environment

  • OS: windows 10;node v14.11;
  • Packages: 2.0.0-beta.4
  • Env: Production

Steps to reproduce

Tell us how to reproduce this issue. Please provide a working and simplified example.

🎉 BONUS POINTS for creating a minimal reproduction and uploading it to GitHub. This will get you the fastest support. 🎉

Expected behaviour

What should happen?

Actual behaviour

What happens instead?

加载表格组件时,提示不能解析

导航到可搜索表格时,控制台报错如下:
Uncaught (in promise) Error: Couldn't resolve component "default" at "/table/basic"
at vue-router.esm-bundler.js:1903
runtime-dom.esm-bundler-7ba00f5e.js:1176 [Vue warn]: SyntaxError: Unexpected token '.'
warn @ runtime-dom.esm-bundler-7ba00f5e.js:1176
vue-router.esm-bundler.js:1903 Uncaught (in promise) Error: Couldn't resolve component "default" at "/table/formTable"
at vue-router.esm-bundler.js:1903

modal handleDrag

What happens?
modal拖拽,在打开1+N次后失效。

复现步骤,错误日志以及相关配置
传入modal prop , destroyOnClose = true (关闭时销毁 Modal 里的子元素)

相关环境信息
版本:2.0.0-rc.3

开发的时候经常报这个错。刷新就好了。

runtime-dom.esm-bundler-d76e4317.js:1477 Uncaught (in promise) TypeError: Cannot read property 'id' of null
at getId (runtime-dom.esm-bundler-d76e4317.js:1477)
at runtime-dom.esm-bundler-d76e4317.js:1494
at Array.sort ()
at flushJobs (runtime-dom.esm-bundler-d76e4317.js:1494)

QQ图片20201027162637

点赞

看了下做的挺好的,点赞。实现了好几个我想做但还没做的功能。

反手问一下,有兴趣来字节么~

发现一个错误

TypeError: str.matchAll is not a function
at Object.extractor (H:\vue-vben-admin-main\node_modules@purge-icons\core\dist\index.js:146:27)
at Extract (H:\vue-vben-admin-main\node_modules@purge-icons\core\dist\index.js:173:54)

New Feature

If the system does not have the function you want, you can put it here, and we will develop it according to the situation!

Function proposal format

Name: Add xxx function
Role: Business scenario description
Online reference example (if available): https://xxxx

如果系统没有您想要的功能,可以在这里提出,我们将视情况进行开发!

功能提出格式

名称:添加xxx功能
作用:业务场景说明
在线参考示例(如果有): https://xxxx

路由缓存无效

看了下官方demo,路由 meta.ignoreKeepAlive: true 应该是控制路由不缓存的,所以所有路由应该都是默认,可是,我试了一下官方demo里面的From-基础表单,随便输入改变页面表单值,切换到其他路由页在切换回来,是没有缓存最后一次状态的。而源码里面,基础表单的ignoreKeepAlive是没有设置值的。

Suggest

If you have good suggestions or ideas, please feel free to mention them here.

如果您有好的建议或者想法,欢迎在这里提。

可以提供一个简易版本吗?

您好,就是可以提供一个不包含其他功能,只需要一个基础框架的空白版本吗?真正实际使用可能还是大多数的页面是用户自己开发。

二维码插件添加头像(Logo)功能

名称:二维码插件添加头像(Logo)功能
作用:在生成的二维码图片中心添加公司Logo或者用户头像
在线参考示例: 微信二维码图案

登录失败无法继续登录

重现步骤:

  1. 登录vvbin.cn
  2. 输入用户名、密码,安全校验
  3. 提示密码错误,然后安全校验,卡住
  4. 需重新刷新。。。

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.