5 fantastische Vue.js-Projektvorlagen

Starten Sie ein großes Vue-Projekt? Um sicherzustellen, dass Sie auf einer soliden Grundlage beginnen, können Sie eine Vorlage (auch Boilerplate, Skeleton, Starter oder Scaffolding genannt) verwenden, anstatt mit npm init oder vue init zu beginnen.

Viele erfahrene Entwickler haben ihre Erfahrungen bei der Erstellung hochwertiger Vue-Anwendungen in Form von Open-Source-Vorlagen gesammelt. Diese Vorlagen umfassen die besten Konfigurationen und Projektstrukturen, die besten Tools von Drittanbietern und andere Best Practices für die Entwicklung.

Im Gegensatz zu Vue CLI 3, das auf Flexibilität optimiert ist, sind Vorlagen anpassbar. Daher ist es wichtig, eines zu wählen, das zu Ihrer Entwicklungsphilosophie passt und ungefähr die gleichen Funktionen bietet, die Sie sofort benötigen.

Einige Überlegungen für die Auswahl einer Vue-Vorlage sind:

• Webpack

• PWA

• Vollständiger Stapel mit Authentifizierung

• Gute Dokumentation

• GraphQL

• Testen

usw.

Es gibt viele tolle Vue.js-Vorlagen, aber in diesem Artikel stellen wir 5 Vorlagen vor, die wichtige Funktionen enthalten, die neue Projekte oft erfordern.

1. Am besten für Webpack

Wenn Sie ein zuverlässiges Webpack-Setup benötigen, dann sind Sie bei den in Vue CLI 2 enthaltenen Webpack-Vorlagen genau richtig. Mit fast 7000 Sternen auf GitHub und entwickelt und gepflegt von Vue-Teammitgliedern ist diese Vorlage Ihre beste Wahl für die Erstellung eines hochoptimierten Webpack-basierten SPA.

Diese Vorlage nutzt viele innovative Funktionen von Webpack und seinem Ökosystem, einschließlich Hot-Reloading, CSS-Extraktion, Linting und natürlich das Laden einzelner Dateikomponenten. Es umfasst auch individuelle Konfigurationen, die für Entwicklung, Produktion und sogar Tests optimiert sind.

Als Teil von Vue CLI 2 ist dies eine der am wenigsten eigenwilligen Vorlagen, die wir bereitstellen werden, und enthält daher nicht viele erforderliche Zusatzfunktionen wie serverseitiges Rendering.

Wenn Ihnen Webpack-Vorlagen etwas zu viel sind, können Sie den kleinen Bruder, die Webpack Simple-Vorlage, ausprobieren.

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

Hinweis: Vue CLI Version 3, die die Betaphase verlässt, hat die Vorlagenarchitektur zugunsten des Plugins aufgegeben , daher ist diese Vorlage technisch unbeliebt, kann aber dennoch aus einem Legacy-Setup mit Vue CLI 3 verwendet werden. Erfahren Sie mehr in unserem Artikel Vue CLI 3: Ein Game Changer für die Front-End-Entwicklung.

2. Beste PWA für

Benötigen Sie erweiterte Benutzererfahrung für erweiterte Anwendungen? Vue Starter ist eine SPA-Vorlage für servergerenderte PWAs. Es umfasst Vuex und Vue Router, die standardmäßig für die Verwendung von serverseitigem Rendering (SSR) konfiguriert sind.

Dieses Projekt hat große Anstrengungen unternommen, um sicherzustellen, dass die von Ihnen bereitgestellten Projekte von Anfang an über eine hervorragende UX verfügen, z. B. Unterstützung für die Internationalisierung in mehreren Sprachen und einen Lighthouse-Score von 90+ dank SSR und Service Arbeiter-Cache.

Verwenden Sie außerdem Vue-Meta, um Dokumentkopf-Tags für SEO zu verwalten, während SSR sicherstellt, dass Ihre Seiten von Suchmaschinen indiziert werden, die JavaScript-Inhalte unterstützen.

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

Demo: https://vue-starter.herokuapp.com

Wenn Sie eine PWA erstellen, ist VuePack eine weitere gute Option. Natürlich und die Vue CLI 2 PWA-Vorlage

3. Am besten für die Authentifizierung

Wenn Sie eine Benutzerauthentifizierung benötigen, sehen Sie sich die Vue Express Mongo-Beispieldatei an. Dieses Projekt bietet einen Grundbaustein einer Full-Stack-Webanwendung „MEVN“ mit sofort einsatzbereiter Authentifizierung, einschließlich Benutzerregistrierung und Social-Login für Google, Facebook, Twitter und GitHub.

Diese Vorlage folgt bewährten Sicherheitspraktiken und verwendet OAuth 2, Helmet (fügt sichere HTTP-Header hinzu) und Express Validator zur Eingabebereinigung. Es bietet außerdem Unterstützung für mehrere Remote-Protokollierungsdienste.

Für die Datenbank wird MongoDB mit Mongoose bereitgestellt. Das Repo enthält auch die Docker-Konfiguration, sodass Sie problemlos eine Instanz hochfahren können.

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

Demo: http://vemapp.moleculer.services/

Tipps: Wenn Sie Laravel lieber als For verwenden möchten Als Backend für authentifizierte Vue-Anwendungen können Sie die Laravel Vue Boilerplate verwenden, die viele ähnliche Funktionen enthält.

4. Am besten für die Dokumentation geeignet

Der Grund, warum viele Vorlagen scheitern, ist mangelnde Dokumentation. Nicht so bei Vue Enterprise Boilerplate. Das Projekt wird von Chris Fritz erstellt und gepflegt, der den Großteil der Vue-Dokumentation geschrieben hat. Daher ist es gut organisiert und an den Best Practices von Vue ausgerichtet.

Das Tolle an der Dokumentation dieser Vorlage ist, dass sie nicht nur erklärt, was enthalten ist, sondern oft auch, was nicht enthalten ist und warum. Chris erklärte beispielsweise, warum es keine gängigen Vorlagen wie TypeScript, Babel Polyfill, Pug usw. gibt.

Lassen Sie sich nicht von der einfachen Standardseite dieser App täuschen, sie verfügt auch über viele Funktionen. Zu meinen Favoriten gehören eine Mock-API zum Testen und Generatoren, mit denen Sie automatisch Komponententests zum Einrichten von Komponenten, Ansichten und Layouts hinzufügen können.

Vue Enterprise Boilerplate unterstützt auch Vue CLI 3, sodass Projekte problemlos mit anderen Vue CLI 3-Plugins erweitert werden können.

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

5. Am besten für GraphQL

GraphQL liegt derzeit voll im Trend und viele Entwickler möchten es verwenden Ihre neuen Vue-Projekte verwenden es in. Es gibt zwar nicht viele Vue-Vorlagen, aber wenn Sie GraphQL benötigen, schauen Sie sich unbedingt Vuexpresso an.

Dieses Projekt verwendet GraphQL, Apollo und GraphiQL UI, eine browserinterne IDE zum Erkunden von GraphQL. Darüber hinaus erhalten Sie ein gut konfiguriertes Webpack-Setup, Vuex und Vue Router. Sie erhalten außerdem Storybook, das die interaktive Entwicklung, das Testen und die gemeinsame Nutzung von UI-Komponenten ermöglicht.

Der einzige Nachteil von Vuexpresso ist, dass es noch recht neu ist. Nehmen Sie sich also unbedingt die Zeit, jede App, die Sie damit erstellen, gründlich zu testen.

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

Ein weiteres Boilerplate, das GraphQL unterstützt, ist Friendly Vue Starter, das auch über Critical extrahiertes CSS für kritische Pfade enthält.

Verwandte Empfehlungen: Vue-Tutorial

Das obige ist der detaillierte Inhalt von5 fantastische Vue.js-Projektvorlagen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!