Об этом проекте
Vitesse — это высокоориентированный стартовый шаблон для создания веб-приложений на Vite и Vue 3, созданный Энтони Фу. Его цель — предоставить быструю, предварительно настроенную среду, чтобы разработчики могли быстро превращать идеи в работающие приложения, не тратя время на конфигурацию. Шаблон ориентирован на скорость, используя современные инструменты, такие как pnpm, esbuild и Vite, и включает в себя отобранный набор функций и плагинов из коробки.
**Ключевые функции**
- **Vue 3 + Vite**: построен на последнем Vue 3 с Vite для быстрой разработки и сборки.
- **Роутинг на основе файлов**: использует `unplugin-vue-router` для автоматической генерации маршрутов из каталога `src/pages`.
- **Авто-импорты**: Компоненты, API (например, Composition API) и иконки автоматически импортируются, уменьшая шаблонный код.
- **Управление состоянием**: Pinia для интуитивно понятного и типобезопасного управления состоянием.
- **Система макетов**: Поддерживает несколько макетов через `vite-plugin-vue-layouts`.
- **PWA-поддержка**: Интегрирована с `vite-plugin-pwa` для возможностей прогрессивных веб-приложений.
- **Стилизация**: UnoCSS для мгновенного атомарного CSS, с поддержкой любого набора иконок через Iconify.
- **Интернационализация**: Vue I18n с `unplugin-vue-i18n` для поддержки нескольких языков.
- **Markdown**: Пишите Markdown как компоненты Vue, используя `unplugin-vue-markdown` с подсветкой синтаксиса Shiki.
- **SSG**: Генерация статических сайтов через `vite-ssg`, с оптимизацией критического CSS с помощью `beasties`.
- **Тестирование**: Vitest для модульных тестов и Cypress для E2E-тестов, интегрированные с GitHub Actions.
- **TypeScript**: Полная поддержка TypeScript.
- **Развертывание**: Развертывание без конфигурации на Netlify, плюс поддержка Docker для продакшн-сборок.
**Предустановленные плагины**
- Vue Router, Pinia, VueUse, Unhead для управления заголовками, и `vite-plugin-vue-devtools` для улучшенного опыта разработки.
- Стиль кода обеспечивается ESLint с `@antfu/eslint-config` (одинарные кавычки, без точек с запятой).
- Рекомендуемые расширения VS Code для Vite, Volar, Iconify IntelliSense, i18n Ally и ESLint.
**Вариации**
Шаблон вдохновил несколько поддерживаемых сообществом вариаций, включая:
- `vitesse-lite`: Облегченная версия.
- `vitesse-nuxt3`: Для Nuxt 3.
- `vitesse-webext`: Для браузерных расширений.
- `vitesse-ssr-template`: С поддержкой SSR.
- `vitailse`: С TailwindCSS.
- `vitesse-h5`: Для мобильных приложений.
- `vitesse-solid`: Для SolidJS.
**Использование**
- **Разработка**: Запустите `pnpm dev` и посетите `http://localhost:3333`.
- **Сборка**: Запустите `pnpm build`, чтобы создать папку `dist`.
- **Развертывание**: Разверните на Netlify, подключив репозиторий, или используйте Docker с `docker buildx build . -t vitesse:latest` и запустите с `docker run --rm -it -p 8080:80 vitesse:latest`.
**Примечание**: Автор рекомендует использовать Nuxt для новых проектов из-за лучшего опыта разработки на Vue и более последовательного обслуживания, так как Vitesse появился в ранний период перехода на Vite/Vue 3, и обновления могут быть медленнее. Однако он остается надежным справочником для изучения и для проектов, соответствующих его мнению-ориентированной настройке.
**Чек-лист для настройки**
При использовании шаблона обновите имя автора в `LICENSE`, заголовок в `App.vue`, имя хоста в `vite.config.ts`, фавикон в `public`, удалите папку `.github` и очистите README и маршруты.
В целом, Vitesse — это мощный, функционально насыщенный стартовый набор для разработчиков, которые хотят иметь комплексную, мнение-ориентированную настройку для приложений Vue 3, с акцентом на скорость и опыт разработчика.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.