Введение

pangu-portal-web — это фронтенд-проект корпоративного портала, реализованный на основе Vue и Element-UI.

Функции

• Логин / выход.
• Поддержка различных режимов единого входа.
• Единый портал.

Предварительная подготовка

Вам необходимо установить на локальном компьютере Node, Git и Python. Проект основан на ES2015+, Vue, Vuex, Vue Router, Vue-cli, Axios и Element UI. Предварительное изучение этих технологий поможет вам в работе над проектом.

Также есть серия обучающих статей о том, как создать полноценный бэкенд-проект с нуля. Рекомендуется ознакомиться с ними перед началом работы над этим проектом.

— Серия «Рука об руку: создаём бэкенд с помощью Vue» (основы). — Серия «Рука об руке: создаём бэкенд с помощью Vue» (логины и разрешения). — Серия «Рука об рукой: создаём бэкенд с помощью Vue» (практика). — Серия «Рука об рукой: создаём бэкенд с помощью Vue» (VueAdmin — минималистичный шаблон для бэкенда). — Серия «Рука об рукой: создаём бэкенд с помощью Vue» (версия 4.0). — «Рука об рукой: создаём компонент Vue». — «Рука об рукой: используем иконки». — «Рука об рукой: эффективно используем webpack4 (часть 1)». — «Рука об рукой: эффективно используем webpack4 (часть 2)».

Обратите внимание, что этот проект не поддерживает старые версии браузеров, такие как IE. Если вам нужна поддержка старых версий, добавьте polyfill самостоятельно.

Структура каталогов

Проект предоставляет готовую структуру разработки, охватывающую все функции бэкенда. Вот структура каталогов проекта:

├── build                      # Сборка
├── mock                       # Мок-данные
├── public                     # Статические ресурсы
│   │── favicon.ico            # Значок favicon
│   └── index.html             # Шаблон HTML
├── src                        # Исходный код
│   ├── api                    # Все запросы
│   ├── assets                 # Темы, шрифты и другие статические ресурсы
│   ├── components             # Глобальные компоненты
│   ├── directive              # Глобальные директивы
│   ├── filters                # Глобальные фильтры
│   ├── icons                  # SVG-иконки проекта
│   ├── lang                   # Языковые настройки
│   ├── layout                 # Глобальный макет
│   ├── router                 # Маршрутизация
│   ├── store                  # Управление глобальным состоянием
│   ├── styles                 # Глобальные стили
│   ├── utils                  # Глобальные методы
│   ├── vendor                 # Общие библиотеки
│   ├── views                  # Все страницы
│   ├── App.vue                # Главная страница
│   ├── main.js                # Главный файл, загрузка компонентов и инициализация
│   └── permission.js          # Управление разрешениями
├── tests                      # Тесты
├── .env.xxx                   # Конфигурация среды
├── .eslintrc.js               # Настройки ESLint
├── .babelrc                   # Настройки Babel-loader
├── .travis.yml                # Автоматизация CI
├── vue.config.js              # Настройки Vue-cli
├── postcss.config.js          # Настройки PostCSS
└── package.json               # Package.json

Установка

1. Клонируйте проект: git clone https://gitee.com/pangu-tech/pangu-portal-web.git.
2. Перейдите в каталог проекта: cd pangu-authorize-web.
3. Установите зависимости: npm install.
4. Запустите проект: npm run dev.

Совет

Не рекомендуется использовать CNPM для установки, так как это может вызвать различные проблемы. Вы можете ускорить установку npm, указав другой реестр. Если у вас всё ещё возникают проблемы, вы можете попробовать использовать Yarn вместо npm.

Пользователи Windows могут столкнуться с проблемами при установке, особенно если node-sass не устанавливается. В этом случае обратитесь к решению на GitHub.

Также учтите, что node-sass зависит от среды Python, поэтому убедитесь, что она установлена и настроена правильно.

После запуска проекта браузер автоматически откроется по адресу http://localhost:8890. Если вы видите эту страницу, установка прошла успешно.

Экосистема Vue

Прежде чем начать работу над проектом, ознакомьтесь со следующими инструментами из экосистемы Vue:

• Vue Router — официальный маршрутизатор от Vue. Он помогает быстро создавать одностраничные или многостраничные приложения.
• Vuex — управление состоянием для приложений Vue. Оно обеспечивает централизованное хранение состояния всех компонентов и предсказуемое изменение состояния. Это может помочь решить проблемы с глобальным состоянием и коммуникацией между компонентами.
• Vue Loader — загрузчик для файлов Vue, который позволяет использовать горячую перезагрузку во время разработки и другие функции. Однако в большинстве случаев вам не нужно настраивать его напрямую, так как фреймворк уже сделал это за вас.
• Vue Test Utils — инструменты для тестирования Vue-компонентов.