vue2 admin

vue2-администратор

Адрес опыта: vue2-admin
Учетная запись: admin Пароль: admin
Если вы столкнулись с ошибкой или у вас есть лучшая реализация, пожалуйста, свяжитесь со мной (вы также можете отправить мне электронное письмо с вопросом, не понимаете ли вы код). Электронная почта: [email protected]

Адрес github версии vue2: vue2-admin
Также есть склад gitee, просто измените github по ссылке выше на gitee.

---

Содержит функции

1. Анимация загрузки первого экрана
2. пакет axios
3. контроль разрешений маршрутизатора
4. Динамическое создание боковой панели навигации на основе разрешений.
5. Логика входа в систему
6. Макет страницы информационной панели
8. Компоненты, основанные на вторичной инкапсуляции el-tooltip, отображают всплывающую подсказку только при превышении длины и поддерживают все атрибуты el-tooltip. 9. Компоненты, основанные на вторичной инкапсуляции el-table, поддерживают все атрибуты el. -таблица и поддержка пейджинга. 10. Компонент выбора значков на основе вторичной инкапсуляции el-icon. 11. Функция бесконтактного обновления токена.

---

vue2+element+axios фоновый шаблон

Он не чрезмерно инкапсулирует функции и предоставляет только базовую структуру страницы и структуру маршрутизации. Остальные функции полностью оставлены на усмотрение пользователей.

Внедрите макеты, чтобы облегчить раздельную разработку внешнего и внутреннего интерфейса.

О макетах

Чтобы продемонстрировать эффект, я также использовал методock.js для генерации тестовых данных в формальной среде. Но официальная версия использоваться не будет!

Пожалуйста, выполните его в перерыве во время официального использования.

 npm uninstall mockjs --save

Если вам нужны тестовые данные во время разработки, выполните следующие инструкции для установки макетов в среде разработки.

 npm install mockjs -D

---

Инкапсулировать аксиомы

Заголовки запросов можно настроить в utils/request.js и изменить в соответствии с вашей реальной ситуацией.

Настройте базовый URL-адрес запроса в API в utils/setting.js.

Общая среда — .env.

Среда разработки — .env.development.

Производственная среда — .env.production.

Приоритет переменной среды .env.production = .env.development > .env

В каталоге src проекта есть папка api, а затем создайте в ней новый файл user.js. Этот файл представляет собой процесс инкапсуляции написания API.

Рекомендуется помещать тип интерфейса в один и тот же файл при его использовании, чтобы облегчить отладку и унифицированное управление.

Если используется формат @/api/user.js, он будет представлен первым при его использовании. Например, я сначала представляю файл @/comComponent/login.vue.

 import { loginApi } from "@/api/user"
login ( ) {
  let data = this . ruleForm
  loginApi ( data ) . then ( res => {
    console . log ( res )
  } )
} 

---

контроль разрешений маршрутизатора

Динамическое создание маршрутов на основе данных, возвращаемых интерфейсом, и создание панели навигации на основе данных интерфейса.

В @/router/beforEach.js есть ограничители маршрутов. Если вы хотите реализовать другие функции (например: вы можете войти на определенную страницу только после выполнения определенной операции), вы можете добавить их. в router/beforEach.js Добавьте соответствующую логику в функцию Selfexecution.

Текст генерирует боковую навигацию на основе маршрута.

Настройте значок, заголовок и скрытую часть боковой панели в мета-атрибуте @/router/beforEach.js. Если скрыто: true, боковая панель навигации не отображается.

Цвет боковой панели можно изменить с помощью Side_color и Side_rext_color темы в utils/setting.

---

ВУЭКС

Поместите модульность vuex, контроль входа и разрешений в отдельный модуль.

Чтобы предотвратить потерю обновления данных Vuex, введите vuex-persistedstate.

 // 为了防止刷新页面vuex中的数据丢失，可以选择性地将数据存入sessionstorage中，防止丢失
plugins: [ createPersistedState ( {
    storage : window . sessionStorage ,
    reducer ( val ) {
        return {
        // 只储存state中的isPC
        isPC : val . user . isPC
        }
    }
} ) ]

Чтобы пользователи не могли вручную изменять хранилище сеансов, добавляется событие прослушивания.

 window . addEventListener ( 'storage' , function ( e ) {
    sessionStorage . setItem ( e . key , e . oldValue )
} ) ; 

---

кнопка дросселирования

Был добавлен базовый код регулирования кнопок, и к кнопке можно привязать v-preventReClick.

 // button节流，在button中添加v-preventReClick即可控制按钮，防止按钮连击，时间限制2s
Vue . directive ( "preventReClick" , {
    inserted ( el , binding ) {
      el . addEventListener ( "click" , ( ) => {
        if ( el . style . pointerEvents !== "none" ) {
          el . style . pointerEvents = "none"
          setTimeout ( ( ) => {
            el . style . pointerEvents = ""
          } , 2000 )
        }
      } )
    }
} ) 

---

начальная страница включения

Страница входа,

Страница восстановления пароля,

404 страница,

Домашняя страница

---

Подготовка к использованию

 npm uninstall mockjs --save

npm install mockjs -D

npm install

Начать проект

 npm run serve

Упаковка проекта

 npm run build

Форматирование кода

 npm run lint

докер

 docker build -t vue-admin . --no-cache