Введение

pangu-upms-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 component». — Статья «Рука об руку: используем иконки элегантно». — Статья «Рука об рукой: используем 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

Установка

# Клонируем проект
git clone https://gitee.com/pangu-tech/pangu-upms-web.git

# Переходим в каталог проекта
cd pangu-upms-web

# Устанавливаем зависимости
npm install

# Рекомендуется использовать npm вместо cnpm, так как cnpm может вызывать различные проблемы. Вы можете ускорить установку npm, используя следующую команду.
npm install --registry=https://registry.npm.taobao.org

# Запускаем проект для локальной разработки
npm run dev

Совет

Не рекомендуется использовать cnpm для установки, так как это может вызвать различные проблемы. Можно решить проблему медленной установки npm, указав другой реестр. Если проблема не устраняется, можно использовать Yarn вместо npm.

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

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

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

Экосистема Vue

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

1. Vue Router — официальный маршрутизатор Vue. Он помогает быстро создавать одностраничные или многостраничные приложения.

2. Vuex — система управления состоянием для приложений Vue. Она централизованно хранит состояние всех компонентов и обеспечивает предсказуемое изменение состояния. Это может помочь решить многие проблемы с глобальным состоянием и коммуникацией между компонентами.

3. Vue Loader — загрузчик для файлов Vue, который позволяет писать компоненты Vue в формате одного файла (SFCs). Он предоставляет горячую перезагрузку во время разработки и другие функции, такие как имитация scoped CSS и т.д. Однако в большинстве случаев вам не нужно настраивать его напрямую, поскольку фреймворк уже сделал это за вас. Utils — это официальный инструмент для модульного тестирования. Он позволяет более удобно писать модульные тесты.

4. Vue Dev-Tools — это инструмент для отладки Vue в браузере. Обязательный плагин для разработчиков на Vue, который значительно повышает эффективность отладки.

5. Vue CLI — это официальная платформа для создания проектов Vue. Данный проект также создан с использованием этой платформы. Она помогает разделить множество конфигураций webpack и Babel, позволяя тратить меньше времени на настройку среды и больше внимания уделять написанию кода страниц. Однако все фреймворки предназначены для большинства случаев, поэтому некоторые специфические требования требуют самостоятельной настройки. Рекомендуется сначала прочитать документацию по платформе, чтобы получить общее представление о некоторых конфигурациях.

6. Vetur — это плагин для VS Code. Если вы используете VS Code для разработки на Vue, этот плагин незаменим.