vue-real-admin

npm i

npm run dev

npm run build

SRC каталог развертывания приложения
Интерфейс - API интерфейсы
Ключевые слова - публичные файлы
├─components
│ ├─ActionButton.vue сборка кнопок заголовков таблицы (не завершена)
│ ├─BreadCrumb.vue компонент сборки хлебных насечек (компонент хлебных насечек)
│ ├─Home.vue основной фреймовый компонент (ссылка на хлебные насечки, меню списка)
│ ├─JmTable.vue компонент таблицы списка страниц (ссылка на таблицу tb)
│ ├─JmTb.vue компонент ячейки таблицы TB
│ ├─QueryForm.vue компонент поиска в шапке таблицы (не завершен)
│ ├─TreeMenu.vue компонент списка меню
│ ├─forms
│ │ ├─JmInput.vue компонент файла ввода
│ │ ├─JmEnum.vue компонент файла выпадающего списка (не завершен)
│ │ ├─List.vue компонент файла списка (не завершен)
Конфигурация - конфигурационная конфигурация
```Сеть маршрутизатор управления маршрутизацией

├─store

│ ├─index.js файл состояния пользователя

│ ├─mutations.js файл слоя бизнес-логики данных

├─utils

│ ├─request.js файл вторичной упаковки Axios

│ ├─request.js файл вторичной упаковки хранилища

├─views

│ ├─авторизация

│ │ ├─правила

│ │ │ ├─индекс.vue представление списка страниц

│ │ │ ├─индекс.js файл списка страниц

│ │ │ ├─добавить.vue представление страницы добавления

│ │ │ ├─редактирование.vue представление страницы редактирования

│ └─... Больше библиотек классов



## Визуальный эффект программного обеспечения



! [введите описание изображения] (/ 1)

! [введите описание изображения] (. / public / image.png)

! [введите описание изображения] (. / public / image3.png)

! [введите описание изображения] (. / public / image4.png)

## Учетная запись программного обеспечения

По умолчанию учетная запись: admin

По умолчанию пароль: 123456



## Документация интерфейса



[https://www.eolink.com/share/index?shareCode=7mEAG4](https://www.eolink.com/share/index?shareCode=7mEAG4)



## Компоненты

#### Компонент таблицы```    
dataList:  [],
columns: [
            {label: "#",        prop: "id",  width: 150, type: "selection"   },
            {label: "Имя",      prop: "name",    },
            {label: "иконка",   prop: "icon",    type: "icon"   },
            {label: "аватар",   prop: "avatar",    type: "avatar"   },
            {label: "количество", prop: "count",    type: "tc-num"   },
            {label: "денежная сумма", prop: "money",    type: "money"   },
            {label: "денежная сумма с флагом", prop: "money-f",    type: "money-f"   },
            {label: "ставка",    prop: "rate",    type: "rate"   },
            {label: "описание",  prop: "intro",    type: "textarea"   },
            {label: "оглавление", prop: "rich-text",    type: "rich-text"   },
            {label: "ссылка на аватар", prop: "link",    type: "link"   },
            {label: "изображение аватара", prop: "img",    type: "img"   },
            {label: "время создания", prop: "create_time",    type: "date"   },
            {label: "дата и время", prop: "datetime",    type: "datetime"   },
        
        ], // параметры строки
```**Метод поддержки компонента**



- добавить

- редактировать

- удалить

**Пользовательский метод**

1. Откройте компонент jmtable и добавьте событие.

2. Через `this.$parent.del(_id)` вызовите метод родительской страницы.

#### Компонент формы

 <JmInput jmname="Обычное поле ввода:" v-model="form.name"></JmInput>
                <JmInput type="num" jmname="Числовое поле ввода:" v-model="form.age"></JmInput>
                <JmInput type="password" jmname="Поле ввода пароля:" v-model="form.password"></JmInput>
                <JmInput type="textarea" jmname="Многотабличное поле ввода:" v-model="form.name"></JmInput>
                <JmInput type="date" jmname="Дата ввода:" v-model="form.createTime"></JmInput>
                <JmInput type="datetime" jmname="Дата и время ввода:" v-model="form.createTime2"></JmInput>
                <JmInput type="time" jmname="Время ввода:" v-model="form.createTime3"></JmInput>
                <in-list type="text-list" jmname="Текстовый список:" v-model="form.urlList"></in-list>
                <JmInput type="slider" jmname="Слайдер параметров:" v-model="form.widthValue"></JmInput>
                <JmInput type="color" jmname="Выбор цвета:" v-model="form.color"></JmInput>
                <JmInput type="rate" jmname="Компонент рейтинга:" v-model="form.rate"></JmInput>
                <JmInput type="money" jmname="Поле ввода суммы денег:" v-model="form.moneyFen"></JmInput> 

`Изображения и т.д. используются непосредственно встроенным изображением Element Plus.`

Пример:

```   <el-form-item label="Аватар">
              <el-upload
                class="avatar-uploader"
                action="http://real-think.jmwl51.com/admin/Ajaxs/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="form.avatar" :src="form.avatar" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
```## Метод вызова интерфейса



`this.$api.getRule();`