1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/onlymry-vue-antd-admin

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Это зеркальный репозиторий, синхронизируется ежедневно с исходного репозитория.
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
5 лет назад
5 лет назад
5 лет назад
5 лет назад
5 лет назад
5 лет назад
5 лет назад
Loading...
README.md

Управление системой на основе Vue + Ant Design UI

  • PS: ветка master отстает от ветки dev. Когда версия достаточно стабильна и нет существенных изменений, ветка dev синхронизируется с веткой master.
  • Мы не создаем код, мы просто перемещаем его.
  • Версия на TypeScript доступна по адресу: шаблон управления версией TypeScript
  • В данный момент вы просматриваете версию на TypeScript.

Запуск

git clone https://gitee.com/onlymry/vue-antd-admin.git
$yarn/cnpm/npm i && yarn/cnpm/npm run serve

Предварительный просмотр

Адрес предпросмотра адрес GitHub

demo1

Примечание: адрес GitHub медленнее, чем адрес Gitee.

Использование

Настройте меню в config/config.js, например:

{
  key: "home",
  title: "Главная страница",
  icon: "user",
  system: 'dev',
  children: [
    {
      key: "home",
      title: "Главная страница"
    }
  ]
},
{
  key: "components",
  title: "Компоненты",
  icon: "user",
  system: 'default',
  children: [
    {
      key: "charts",
      title: "Графики"
    }
  ]
}

Меню и маршруты взаимозависимы

{
    path: '/about',
    name: 'About',
    component: () => import('../antdviews/About.vue')
},

Зависимости| Название | Добавление зависимости | Функционал |

| --- | --- | --- | | highcharts | yarn add / npm i / cnpm i highcharts | Графики | | v-charts | yarn add / npm i / cnpm i echarts v-charts | Графики | | g2 | yarn add / npm i / cnpm i @antv/g2 | Графики | | xlsx | yarn add / npm i / cnpm i xlsx | Обработка Excel | | clipboard | yarn add / npm i / cnpm i clipboard | Копирование текста | | lodash | yarn add / npm i / cnpm i lodash | Полезная библиотека | | wangeditor | yarn add / npm i / cnpm i wangeditor cos-js-sdk-v5 | Редактор WYSIWYG | | axios | yarn add / npm i / cnpm i axios qs | AJAX-запросы |## План

  1. Сначала напишите примеры компонентов Antd в систему.
  2. Следующий шаг — интегрировать часто используемые функциональные компоненты.
  3. Сейчас мы уже интегрировали редактор WYSIWYG, карты, Excel, lodash, экран больших данных и другие плагины.
  4. Следующий шаг — интеграция часто используемых функций для среднего и внутреннего использования.

Динамическая загрузка SDK

Название URL Функционал
Бaidu Map GL https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ваш_ключ_api}&callback=initialize Карта Baidu
Tencent Map GL SDK https://map.qq.com/api/gljs?v=1.exp&key=${ваш_ключ_api}&callback=init Карта Tencent
AMap https://webapi.amap.com/maps?v=1.4.15&key=${ваш_ключ_api} Карта AMap

Динамическое включение функции script

loadScript(callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = `Это ваш url`;

    document.body.appendChild(script);
    if (script.readyState) {
        // IE
        // Только для отвратительной реализации в Internet Explorer
        script.onreadystatechange = function() {
            if (
                script.readyState === 'complete' ||
                script.readyState === 'loaded'
            ) {
                script.onreadystatechange = null;
                // callback && callback() проверяет, является ли переданный обратный вызов пустым, если да - не выполняется, если нет - выполняется
                callback && callback();
            }
        };
    } else {
        // Для остальных браузеров
        script.onload = function() {
            callback && callback();
        };
    }
}

Пример AJAX запроса> AJAX запрос использует axios, конфигурация запроса определена в src/tools/http.js. Внутри файла есть закомментированные строки, представляющие собой обычные операции проекта.1. демо:

<template>
  <div>
    <div id="demo"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    // Вызов AJAX запроса внутри метода mounted
    this.getData();
    this.postData();
  },
  methods: {
    getData() {
      this.$http.get(url, requestArguments).then((res) => {
        console.log(res);
      });
    },
    postData() {
      this.$http.post(url, requestArguments).then((res) => {
        console.log(res);
      });
    }
  }
};
</script>

<style lang="less" scoped>
</style>

Правила коммитов

feat: добавление нового функционала
fix: исправление ошибки
docs: добавление документации
style: оптимизация стиля кода (изменения, не влияющие на выполнение)
test: добавление тестов
refactor: рефакторинг кода
chore: изменения в процессе сборки или вспомогательных инструментах

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

Фронтенд-шаблон для системы управления на основе Vue и antdUI. Поддержка прекращена, теперь поддерживается только версия ts. Развернуть Свернуть
Vue и 4 других языков
MIT
Отмена

Обновления

Пока нет обновлений

Участники (4)

все

Недавние действия

Создан репозиторий 4 месяца назад
Больше нет результатов для загрузки
1
https://gitlife.ru/oschina-mirror/onlymry-vue-antd-admin.git
git@gitlife.ru:oschina-mirror/onlymry-vue-antd-admin.git
oschina-mirror
onlymry-vue-antd-admin
onlymry-vue-antd-admin
dev