5 superbes modèles de projets Vue.js

Démarrez-vous un projet Vue majeur ? Pour vous assurer de partir d'une base solide, vous pouvez utiliser un modèle (également appelé passe-partout, squelette, démarreur ou échafaudage) à la place. de partir de npm init ou vue init.

De nombreux développeurs expérimentés ont rassemblé leur expérience dans la création d'applications Vue de haute qualité sous la forme de modèles open source. Ces modèles incluent les meilleures configurations et structures de projet, les meilleurs outils tiers et d'autres bonnes pratiques de développement.

Contrairement à Vue CLI 3 qui est optimisé pour la flexibilité, les modèles sont personnalisables. Par conséquent, il est important d’en choisir un qui correspond à votre philosophie de développement et qui possède à peu près les mêmes fonctionnalités dont vous avez besoin dès le départ.

Certaines considérations pour choisir un modèle Vue incluent :

• Webpack

• PWA

• Full-stack avec authentification

• Bonne documentation

• GraphQL

• Tests

Attendez.

Il existe de nombreux excellents modèles Vue.js, mais dans cet article, nous présenterons 5 modèles contenant des fonctionnalités clés dont les nouveaux projets ont souvent besoin.

1. Idéal pour Webpack

Si vous avez besoin d'une configuration Webpack fiable, ne cherchez pas plus loin que Vue CLI Le modèle Webpack inclus en 2 fera l'affaire. Avec près de 7 000 étoiles sur GitHub et développé et maintenu par les membres de l'équipe Vue, ce modèle est votre meilleur choix pour créer un SPA hautement optimisé alimenté par un webpack.

Ce modèle profite de nombreuses fonctionnalités de pointe de Webpack et de son écosystème, notamment le rechargement à chaud, l'extraction CSS, linting , et bien sûr le chargement de composants dans un seul fichier. Il comprend également des configurations individuelles optimisées pour le développement, la production et même les tests.

Dans le cadre de Vue CLI 2, il s'agit de l'un des modèles les moins avisés que nous fournirons et ne contient donc pas de nombreux extras nécessaires. Des fonctionnalités telles que rendu côté serveur.

Si vous trouvez les modèles Webpack un peu exagérés, vous pouvez essayer son petit frère, le modèle Webpack Simple.

Lien : https://github.com/vuejs-templates/webpack

Remarque : la version 3 de Vue CLI, qui sort de la version bêta, a abandonné l'architecture des modèles au profit des plugins, ce modèle est donc techniquement impopulaire, mais peut toujours être téléchargé depuis Vue CLI 3 utilisé dans les paramètres hérités. Apprenez-en plus dans notre article Vue CLI 3 : Un changement de jeu pour le développement front-end.

2. La PWA la plus adaptée

Vous avez besoin d'applications avancées. expérience utilisateur avancée ? Vue Starter est un modèle SPA pour les PWA rendues par le serveur. Il comprend Vuex et Vue Router, configurés pour utiliser le rendu côté serveur (SSR) prêt à l'emploi.

Ce projet a déployé beaucoup d'efforts pour garantir que les projets que vous déployez aient dès le départ une excellente UX, comme la prise en charge de l'internationalisation dans plusieurs langues et un Score Lighthouse de 90 +, grâce à la mise en cache SSR et Service Worker.

De plus, utilisez vue-meta pour gérer les balises d'en-tête de document pour le référencement, tandis que SSR garantit que vos pages seront indexées par les moteurs de recherche prenant en charge le contenu JavaScript.

Lien : https://github.com/devCrossNet/vue-starter

Démo : https://vue-starter.herokuapp.com

Si vous créez une PWA, une autre bonne option est VuePack, et bien sûr, le modèle PWA Vue CLI 2

3. Idéal pour l'authentification

Si vous avez besoin d'une authentification utilisateur, consultez l'exemple de fichier Vue Express Mongo. Ce projet fournit un modèle d'application Web « MEVN » complète avec une authentification prête à l'emploi, y compris l'enregistrement des utilisateurs et la connexion sociale pour Google, Facebook, Twitter et GitHub.

Ce modèle suit les meilleures pratiques de sécurité, en utilisant OAuth 2, Helmet (ajout d'en-têtes HTTP sécurisés) et Express Validator pour la vérification des entrées. Il prend également en charge plusieurs services de journalisation à distance.

Pour la base de données, MongoDB avec Mongoose est fourni. Le dépôt contient également la configuration Docker afin que vous puissiez facilement démarrer une instance.

Lien : https://github.com/icebob/vue-express-mongo-boilerplate

Démo : http://vemapp.moleculer.services/

Conseil : Si vous préférez utiliser Laravel comme backend pour votre application Vue authentifiée, essayez d'utiliser le Laravel Vue Boilerplate qui comprend de nombreuses fonctionnalités similaires.

4. Idéal pour les documents

La raison pour laquelle de nombreux modèles échouent est due au manque de documentation. Vue Enterprise BoilerplatePas du tout. Le projet est créé et maintenu par Chris Fritz, qui a écrit la majeure partie de la documentation Vue, il est donc bien organisé et aligné sur les meilleures pratiques de Vue.

L'avantage de la documentation de ce modèle est qu'elle explique non seulement ce qui est inclus, mais souvent ce qui ne l'est pas et pourquoi. Par exemple, Chris a expliqué pourquoi il n'existe pas de modèles communs dans TypeScript, Babel polyfill, Pug, etc.

Ne vous laissez pas tromper par la simple page par défaut de cette application, elle possède également de nombreuses fonctionnalités. Certains de mes favoris incluent une API moqueuse pour les tests et incluent des générateurs qui vous permettent d'ajouter automatiquement des tests unitaires pour configurer des composants, des vues et des mises en page.

Vue Enterprise Boilerplate prend également en charge Vue CLI 3, de sorte que les projets peuvent être facilement étendus avec d'autres plugins Vue CLI 3.

Lien : https://github.com/chrisvfritz/vue-enterprise-boilerplate

5. Le plus approprié pour GraphQL

GraphQL fait fureur en ce moment et de nombreux développeurs cherchent à l'utiliser dans leurs nouveaux projets Vue. Bien qu'il n'y ait pas beaucoup de modèles Vue, assurez-vous de consulter Vuexpresso si vous avez besoin de GraphQL.

Ce projet utilise GraphQL, Apollo et GraphiQL UI, un navigateur pour étudier GraphQL dans l'EDI. De plus, vous obtenez une configuration Webpack bien configurée, Vuex et Vue Router. Vous bénéficiez également de Storybook, qui permet le développement, le test et le partage interactifs de composants d'interface utilisateur.

Le seul inconvénient de Vuexpresso est qu'il est encore relativement nouveau, alors assurez-vous de prendre le temps de tester minutieusement toute application que vous créez avec.

Lien : https://github.com/Ethaan/vuexpresso

Un autre passe-partout qui prend en charge GraphQL est Friendly Vue Starter , il inclut également le CSS du chemin critique extrait via Critical.

Recommandations associées : tutoriel vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!