vitesse

Vitesse est un modèle de démarrage hautement orienté pour créer des applications web avec Vite et Vue 3, créé par Anthony Fu. Il vise à fournir une configuration rapide et préconfigurée afin que les développeurs puissent rapidement transformer des idées en applications fonctionnelles sans passer de temps sur la configuration. Le modèle est conçu pour la rapidité, exploitant des outils modernes comme pnpm, esbuild et Vite, et inclut un ensemble sélectionné de fonctionnalités et de plugins prêts à l'emploi. **Fonctionnalités clés** - **Vue 3 + Vite** : Basé sur Vue 3 avec Vite pour des temps de développement et de construction rapides. - **Routage par fichiers** : Utilise `unplugin-vue-router` pour la génération automatique de routes à partir du répertoire `src/pages`. - **Auto-importations** : Les composants, les API (par exemple, Composition API) et les icônes sont auto-importés, réduisant le code répétitif. - **Gestion d'état** : Pinia pour une gestion d'état intuitive et typée. - **Système de mise en page** : Prend en charge plusieurs mises en page via `vite-plugin-vue-layouts`. - **Support PWA** : Intégré avec `vite-plugin-pwa` pour les capacités d'application web progressive. - **Stylage** : UnoCSS pour un CSS atomique instantané à la demande, avec prise en charge de tout ensemble d'icônes via Iconify. - **Internationalisation** : Vue I18n avec `unplugin-vue-i18n` pour la prise en charge multilingue. - **Markdown** : Écrivez du Markdown comme composants Vue en utilisant `unplugin-vue-markdown` avec la coloration syntaxique Shiki. - **SSG** : Génération de site statique via `vite-ssg`, avec optimisation CSS critique utilisant `beasties`. - **Tests** : Vitest pour les tests unitaires et Cypress pour les tests E2E, intégrés avec GitHub Actions. - **TypeScript** : Prise en charge complète de TypeScript. - **Déploiement** : Déploiement zéro configuration sur Netlify, plus prise en charge Docker pour les builds de production. **Plugins préemballés** - Vue Router, Pinia, VueUse, Unhead pour la gestion de la tête, et `vite-plugin-vue-devtools` pour une expérience développeur améliorée. - Style de codage imposé avec ESLint utilisant `@antfu/eslint-config` (guillemets simples, pas de points-virgules). - Extensions VS Code recommandées pour Vite, Volar, Iconify IntelliSense, i18n Ally et ESLint. **Variantes** Le modèle a inspiré plusieurs variantes maintenues par la communauté, notamment : - `vitesse-lite` : Version légère. - `vitesse-nuxt3` : Pour Nuxt 3. - `vitesse-webext` : Pour les extensions de navigateur. - `vitesse-ssr-template` : Avec prise en charge SSR. - `vitailse` : Avec TailwindCSS. - `vitesse-h5` : Pour les applications mobiles. - `vitesse-solid` : Pour SolidJS. **Utilisation** - **Développement** : Exécutez `pnpm dev` et visitez `http://localhost:3333`. - **Build** : Exécutez `pnpm build` pour générer un dossier `dist`. - **Déploiement** : Déployez sur Netlify en connectant le dépôt, ou utilisez Docker avec `docker buildx build . -t vitesse:latest` et exécutez avec `docker run --rm -it -p 8080:80 vitesse:latest`. **Remarque** : L'auteur recommande d'utiliser Nuxt pour les nouveaux projets en raison d'une meilleure expérience développeur Vue et d'une maintenance plus cohérente, car Vitesse date de la période de transition Vite/Vue 3 et les mises à jour peuvent être plus lentes. Cependant, il reste une référence solide pour apprendre et pour les projets qui correspondent à sa configuration orientée. **Liste de contrôle pour la personnalisation** Lors de l'utilisation du modèle, mettez à jour le nom de l'auteur dans `LICENSE`, le titre dans `App.vue`, le nom d'hôte dans `vite.config.ts`, la favicon dans `public`, supprimez le dossier `.github` et nettoyez les README et les routes. Dans l'ensemble, Vitesse est un modèle de démarrage puissant et riche en fonctionnalités pour les développeurs qui veulent une configuration complète et orientée pour les applications Vue 3, avec un accent sur la rapidité et l'expérience développeur.