Giter VIP home page Giter VIP logo

vue-quasar-manage's Introduction

Vue-Quasar-Manage

license cimo vue

Vue-Quasar-Manage 是一款中后台前端解决方案:

  • 基于 vuequasar-ui 实现,quasar-ui 的设计规范来自 Material Design
  • 包含动态路由,动态缓存,权限验证等常用功能
  • 响应式设计,SPA / Electron / Mobile / Cordova 兼容良好
  • 包含 tagView 快捷导航、面包屑导航等 SPA 应用常用功能
  • 内置 Material Design 图标集
  • 简单的代码逻辑,多种自定义组件,高度可定制性(只有 1600 行代码)
  • 完全开源及免费

当然如果你想要Quasar-cli版本的:Quasar-Manage

使用这个项目前您需要了解如下技术栈:

ES6 | Node.js | Webpack | Vue | Vuex | Vue-Router | Vue-cli | Axios | ESlint

DEMO地址

Github | Gitee 国内用户访问

输入图片说明

electron

ios

android

更新日志

  • 2020/12/3
    • public文件夹路径注入vue原型,方便静态资源引用
  • 2020/12/9
    • 更新到 v1.0.3 beta 版本,进行了性能优化。Github/Gitee的首屏加载速度得到较大的提升。 Gitee访问从原先的 3.5s 左右,提升到 1s 左右。但Github访问收网络影响...此次更新将优化过程新增到性能优化导航项提供参考。
  • 2020/12/24
    • 修复了一个内存泄漏的 bug,以及对 ICON 集合界面进行了渲染性能优化,并将优化过程新增到性能优化导航项提供参考。
    • 有同学反映侧边栏被选中时效果不明显,于是顺便增加了点样式
  • 2020/12/31
    • 优化<BaseContent>的处理逻辑,解决关闭tagView后,重新进入对应页面依然会跳转到滚动记录位置的问题
  • 2021/1/22
    • 重构<tagView>组件,使其更好的兼容多端环境, SPA / Electron / Mobile / Cordova 兼容良好
    • 原先版本基于 quasar 1.3x,有 bug,现版本更新为 quasar 1.5x
      原先项目如何升级:
    • 删除 原先版本 package-lock.json 文件, node_modules 文件
    • 重新运行 install 即可
  • 2021/1/30
    • 修复在微信端<tagView>文本不居中的问题
    • 路由icon改为非必要,优化没有icon<tagView><Breadcrumbs>的显示问题
  • 2021/2/1
    • 当路由带query参数时,<tagView><breadcrumbs>会默认加上第一个参数的值作为标识并显示(之前沙雕了用的params
  • 2021/2/5
    • 针对第一个被开启的嵌套路由<keep-alive>缓存失效,需要进行一次路由切换才能正常缓存的问题:
      经过测试是由于用来做嵌套路由的<layout>组件按需引入导致的,<layout>组件的按需引入由于是异步操作,会是嵌套路由的第一次拍平操作失效
    • 有两种解决方法:

方法 1 : 如果你不想修改源码,在asyncRoutes.js中不对<layout>使用按需引入即可

import layout from '../components/Layout/layout'

{
  path: '/start',
  name: 'start',
  component: layout,
  children: [{...}]
}

方法 2 (兼容按需加载): 修改permission.js中的handleKeepAlive方法为 async/await

async function handleKeepAlive (to) {
  if (to.matched && to.matched.length > 2) {
    for (let i = 0; i < to.matched.length; i++) {
      const element = to.matched[i]
      if (element.components.default.name === 'layout') {
        to.matched.splice(i, 1)
        await handleKeepAlive(to)
      }
      if (typeof element.components.default === 'function') {
        await element.components.default()
        await handleKeepAlive(to)
      }
    }
  }
}

经过测试两种方式都可行,不过,总觉得递归和异步套着来一点都不爽 ┗( ▔, ▔ )┛,所以我用第一种...能简单解决的问题,何必复杂化捏...

  • 2021/3/20
    • 如果路由的 roles 没有被设置或为空,则所有用户均可访问
    • 添加了后端动态获取路由的 DEMO,并提供了实现思路作为学习交流
  • 2021/4/10
    • 将 quasar 版本降低为 1.15.1 ,修复 ios 端 input 重复输入的问题
  • 2021/9/05
    • 修复侧边栏在特定分辨率下会出现滚动条的问题

如何运行

请确保您的计算机已经安装了 Node.js 以及 git,当前项目主要用于展示说明文档

建议使用模板项目 vue-quasar-manage-template 进行开发。

1、克隆项目

git clone https://github.com/972784674t/vue-quasar-manage-template.git

2、在项目文件夹 cmd 下,下载项目所需依赖

npm install 或 cnpm i (如果您正在使用 cnpm,但是 cnpm 下载依赖不太稳定 )

3、在项目文件夹 cmd 下,启动开发服务器

npm run serve

如何打包

npm run build

License

Copyright (c) 2015-present Razvan Stoenescu

MIT License

vue-quasar-manage's People

Contributors

972784674t avatar xyf001 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

vue-quasar-manage's Issues

修复错误Error Code

描述:修复错误Error Code,404 -> 408
PR:#4.

quasar-manage,vue-quasar-manage-template 项目中存在相同错误。

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.