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

- PS: ветка master отстает от ветки dev. Когда версия достаточно стабильна и нет существенных изменений, ветка dev синхронизируется с веткой master.
- Мы не создаем код, мы просто перемещаем его.
- Версия на TypeScript доступна по адресу: [шаблон управления версией TypeScript](https://gitee.com/onlymry/v-antd-admin)
- В данный момент вы просматриваете версию на TypeScript.

## Запуск

```bash
git clone https://gitee.com/onlymry/vue-antd-admin.git
```

```bash
$yarn/cnpm/npm i && yarn/cnpm/npm run serve
```

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

[Адрес предпросмотра](http://antd.admin.onlyylt.top/)
[адрес GitHub](https://github.com/bossbaba/vue-antd-admin-template)

[demo1](http://demo1.antd.admin.onlyylt.top/)

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

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

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

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

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

```js
{
    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 в систему.
1. Следующий шаг — интегрировать часто используемые функциональные компоненты.
1. Сейчас мы уже интегрировали редактор WYSIWYG, карты, Excel, lodash, экран больших данных и другие плагины.
1. Следующий шаг — интеграция часто используемых функций для среднего и внутреннего использования.

## Динамическая загрузка 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

```js
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. демо:

```js
<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>
```

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

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