OSCHINA-MIRROR/incimo-vue-quasar-manage

Vue-Quasar-Manage — это решение для фронтенда средних и крупных проектов:

— основано на Vue и Quasar-UI, дизайн которого вдохновлён Material Design;
— включает динамические роутинг, кэширование и аутентификацию;
— обладает адаптивным дизайном, совместимо с SPA, Electron, Mobile и Cordova;
— содержит функции вроде быстрого перехода по тегам и хлебных крошек, типичные для SPA-приложений;
— имеет встроенную коллекцию иконок в стиле Material Design;
— отличается простым кодом, множеством настраиваемых компонентов и высокой степенью кастомизации (всего 1600 строк кода);
— полностью открыт и бесплатен.

Если вам нужна версия Quasar-cli, перейдите по ссылке: Quasar-Manage.

Перед использованием этого проекта необходимо ознакомиться со следующими технологиями:

ES6;
Node.js;
Webpack;
Vue;
Vuex;
Vue-Router;
Vue-cli;
Axios;
ESLint.

Адреса DEMO

Github;
Gitee (доступ для пользователей из Китая).

Обновление журнала

2020/12/3

— путь к папке «public» был добавлен в прототип Vue для упрощения доступа к статическим ресурсам.

2020/12/9

— обновление до версии v1.0.3 beta с улучшениями производительности. Скорость загрузки на Github и Gitee значительно увеличилась. Время загрузки на Gitee сократилось с примерно 3,5 секунд до примерно одной секунды. Однако скорость загрузки на Github зависит от сети. Процесс оптимизации был добавлен в раздел «Оптимизация производительности».

2020/12/24

— исправлена утечка памяти, а также улучшена производительность рендеринга коллекции иконок. Оптимизация была добавлена в раздел «Оптимизация производительности». Кроме того, были внесены незначительные изменения в стиль боковой панели при выборе элемента.

2020/12/31

— логика обработки компонента была оптимизирована, чтобы решить проблему возврата к записи прокрутки после закрытия tagView.

2021/1/22

— tagView был переработан для лучшей совместимости с различными платформами: SPA, Electron, Mobile, Cordova. Предыдущая версия была основана на quasar 1.3x и содержала ошибки, текущая версия обновлена до quasar 1.5x.

Для обновления предыдущей версии выполните следующие шаги:

Удалите файлы package-lock.json и node_modules.
Запустите команду install.

2021/1/30

— проблема с выравниванием текста в tagView на платформе WeChat была решена.

Иконки в route были удалены, и tagView и Breadcrumbs были оптимизированы для работы без них.

2021/2/1

— когда маршрут содержит параметр query, tagView и breadcrumbs будут автоматически добавлять первый параметр в качестве идентификатора и отображать его. Ранее использовался params, но это было ошибкой.

2021/2/5

— проблема с кешированием вложенных маршрутов, требующая переключения маршрута для правильного кеширования, была решена. Причина проблемы заключалась в использовании асинхронной загрузки для компонента layout, который используется для создания вложенных маршрутов. Асинхронная загрузка приводит к тому, что операция сплющивания первого вложенного маршрута становится недействительной.

Есть два способа решения этой проблемы:

Способ 1: Если вы не хотите изменять исходный код, просто удалите асинхронную загрузку для layout в файле asyncRoutes.js.

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

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

Способ 2 (совместимый с асинхронной загрузкой): Измените метод handleKeepAlive в permission.js на 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

— если роли в маршруте не установлены или пусты, все пользователи могут получить доступ.

Добавлена демонстрация динамического получения маршрутов с сервера, предоставляющая идеи для реализации.

2021/4/10

— версия quasar была понижена до 1.15.1, чтобы исправить проблему с повторным вводом данных в поле ввода на ios.

2021/9/05

— проблема с появлением полосы прокрутки в боковом меню при определённых разрешениях была устранена. git, текущий проект в основном используется для демонстрации пояснительной документации.

Рекомендуется использовать шаблон проекта vue-quasar-manage-template для разработки.

Клонируйте проект:

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

В папке с файлами проекта через командную строку (cmd) загрузите необходимые зависимости проекта:

npm install или cnpm i (если вы используете cnpm, но загрузка зависимостей через cnpm может быть нестабильной).

В командной строке в папке с файлами проекта запустите сервер разработки:

npm run serve

Как упаковать

npm run build

License

Лицензия MIT