Vue3 admin element template

Vue3-admin-element-template — это упрощённая версия Vue3-admin-element, из которой была удалена богатая библиотека компонентов. В проекте используется Composition Api и новый синтаксис «<script setup>».

Введение

Проект Vue3-admin-element-template реализован на JavaScript. Автор полагает, что некоторые начинающие программисты не знакомы с TypeScript и ищут шаблоны для разработки Vue 3. Большинство шаблонов, которые можно найти на GitHub, основаны на TypeScript. Поэтому автор решил создать шаблон на основе JavaScript, хотя если вы хорошо знаете TypeScript, то рекомендуется использовать его! Если вы не знакомы с ним, рекомендуется включить его изучение в свой план. В будущем планируется разработать комплектное решение для интерфейса с использованием TypeScript и Naiveui.

Описание

Vue3-admin-element-template представляет собой бесплатный шаблон с открытым исходным кодом. Он разработан с использованием новейших технологий Vue 3, Vite 2 и других популярных инструментов. Это готовое решение для создания интерфейса.

Цели проекта:

• изучить API, связанные с Vue 3;
• освоить механизм плагинов и конфигурацию сборки Vite 2.

Примечание: проект использует новый синтаксис <script setup>, который может вызывать жёлтые предупреждения. Не обращайте на них внимания!

Онлайн-демонстрация: https://hu-snail.gitee.io/vue3-admin-element-template

Характеристики

• Новейшие технологии: Vue 3.2.12, Vite 2.
• Версия на JavaScript.
• Возможность настройки темы.
• Решение для интернационализации с помощью vue-i18n.
• Схема фиктивных данных.
• Контроль доступа.

Ресурсы Vue 3

Сайт, на котором собраны ресурсы по Vue 3 для веб-приложений, мобильных приложений и небольших программ. Онлайн-демонстрация: vue3-resource.

Документация

В процессе написания...

Подготовка

Необходимые инструменты:

• Node: версия рекомендуется не ниже 12.0.0 (https://nodejs.org/zh-cn/download/).
• Git: инструмент управления версиями (https://www.git-scm.com/download).
• Visual Studio Code: последняя версия (https://code.visualstudio.com/Download/).
  • Vetur — необходимый инструмент для разработчиков Vue (https://marketplace.visualstudio.com/items?itemName=octref.vetur).
  • Eslint — инструмент проверки скриптов (https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).
  • Prettier — инструмент форматирования кода (https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).
  • Stylelin — инструмент форматирования CSS (https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint).

Установка и использование

Чтобы получить код:

git clone https://github.com/hu-snail/vue3-admin-element-template.git

Для установки зависимостей:

yarn install

Запустить:

yarn serve

Собрать:

yarn build

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

yarn preview

Сборка и предварительный просмотр:

yarn build:preview

Предварительный просмотр

Онлайн-демонстрация: https://hu-snail.gitee.io/vue3-admin-element-template

Тестовый аккаунт: admin/admin (пароль можно выбрать произвольно).

Скриншоты:

1. https://gitee.com/hu-snail/vue3-admin-element-template/raw/master/src/assets/demo/01.png
2. https://gitee.com/hu-snail/vue3-admin-element-template/raw/master/src/assets/demo/02.png
3. https://gitee.com/hu-snail/vue3-admin-element-template/raw/master/src/assets/demo/03.png
4. https://gitee.com/hu-snail/vue3-admin-element-template/raw/master/src/assets/demo/04.png

Поддержка браузеров

Рекомендуется использовать Chrome версии 80 и выше для локальной разработки.

Поддерживаются современные браузеры, IE не поддерживается.

Автор

@hu-snail

Пожертвования

Если этот проект оказался вам полезен, вы можете поддержать автора, купив ему чашку кофе!

Лицензия

MIT © hu-snail-2021