Быстрый старт с MdAdmin для создания серверных приложений

Центрированный текст:

Изображения:

Особенности:

— ⚡️ Vue 3, Vite 2, pnpm, ESBuild — быстро и эффективно!

— 🗂 Маршрутизация на основе файлов в папке ./src/pages.

— 📦 Автоматизированная загрузка компонентов в ./src/components.

— 🍍 Управление состоянием с помощью Pinia.

— 📑 Система макетов в ./src/layouts.

— 🎨 UnoCSS — мощный и гибкий CSS-движок.

— 😃 Разнообразные наборы иконок.

— 🔥 Использование нового синтаксиса <script setup>.

— 🤙🏻 По умолчанию включена реактивность.

— 📥 Автоматическая загрузка API с Unplugin Auto Import.

— 🦾 TypeScript, конечно же.

Предварительная настройка:

UI-фреймворк:

— Element Plus — библиотека компонентов Vue3. — UnoCSS — высокопроизводительный CSS-движок.

Иконки:

— Iconify — использование любых наборов иконок. — Чистые CSS-иконки от UnoCSS.

Плагины:

— Vue Router. — vite-plugin-pages — маршрутизация на основе файловой системы. — vite-plugin-vue-layouts — система макетов страниц. — Pinia — лёгкое и безопасное управление состоянием. — unplugin-vue-components — автоматическая загрузка компонентов. — unplugin-auto-import — прямое использование Composition API без импорта. — VueUse — набор инструментов для Composition API.

Стиль кодирования:

— Использование синтаксиса SFC <script setup> для Vue. — ESLint настроен на @antfu/eslint-config, одинарные кавычки и отсутствие точек с запятой.

Инструменты разработки:

— TypeScript. — pnpm — быстрый и экономящий место менеджер пакетов. — Расширения VS Code. — Vite — автоматический запуск сервера Vite. — Volar — поддержка Vue 3 <script setup> в IDE. — Iconify IntelliSense — отображение и автозаполнение иконок. — ESLint.

Теперь можно попробовать!

MdAdmin требует Node версии >=14.

GitHub шаблон: используйте этот шаблон для создания репозитория.

Клонирование на локальный компьютер: если вы предпочитаете использовать более чистую историю git, выполните следующие действия вручную.

npx degit hminghe/md-admin-element-plus md-admin
cd md-admin
pnpm i # Если вы не установили pnpm ранее, сначала запустите: npm install -g pnpm

Список задач:

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

— [ ] Изменить имя автора в LICENSE. — [ ] Изменить заголовок в .env. — [ ] Заменить favicon в каталоге public. — [ ] Организовать README и удалить маршруты.

Наслаждайтесь!