aspdotnet vuejs
v3.0.0
Dotnet Core 3.0 + VueJsDie Hauptidee dieses Projekts besteht darin, eine einfache Möglichkeit zum Starten eines neuen Projekts mithilfe von .Net Core WebAPI auf der Serverseite und VueJs auf der Clientseite bereitzustellen. Zu diesem Zweck richten wir die Hauptkonfiguration ein, um diese Integration zu ermöglichen, indem wir einige Dienstprogramme wie Hot Reloading und einige Frontend-Bibliotheken wie Element-UI und FontAwesome verwenden.
Unser Ziel ist es, ein einfaches SPA mit minimalen Abhängigkeiten und Leistungsproblemen bereitzustellen. Die VueJs sind mit Vuex und Vue Router konfiguriert. Dies kann jedoch entfernt werden, wenn Sie der Meinung sind, dass es Ihren Anforderungen nicht entspricht. Das Gleiche gilt für die Komponentenbibliothek. In dieser Vorlage stellen wir auch Beispiele mit den wichtigsten Funktionen bereit.
Diese Vorlage ist vom Projekt von Mark Pieszak und Nordes inspiriert und adaptiert.
* In Arbeit. Verfügbar in zukünftigen Versionen.
Um die Vorlage herunterzuladen und zu installieren, geben Sie einfach Folgendes ein:
> dotnet new -i aspdotnet-vuejsSie können eine Liste der installierten Vorlagen anzeigen, indem Sie den Befehl
dotnet new -lverwenden.
Um Ihr Projekt zu erstellen, verwenden Sie dann einfach den folgenden Befehl im Verzeichnis:
> dotnet new vue Dadurch wird automatisch dotnet restore ausgeführt. Es kann jedoch in Vorlagenkonfigurationen geändert werden. Lesen Sie dotnet new vue -h bevor Sie den vorherigen Befehl verwenden.
Der Lösungs- und Projektname ist der Name des Verzeichnisses.
Um Ihre Installation zu aktualisieren, müssen Sie lediglich den Installationsvorgang wiederholen. Solange die Versionsnummern nicht gleich sind, tritt kein unerwartetes Verhalten auf.
Geben Sie den folgenden Befehl in der Shell ein:
> dotnet new -u aspdotnet-vuejsUm mit der Entwicklung Ihrer Anwendung zu beginnen, verwenden Sie einfach den .Net CLI-Befehl:
> dotnet run YourAplication.csprojSie können einfach
dotnet runin das Projektverzeichnis eingeben oder Ihre IDE für die Ausführung konfigurieren. Vergessen Sie im letzten Fall nicht, die UmgebungsvariableASPNETCORE_ENVIRONMENT=Developmentzu übergeben.
Dadurch werden auch alle Knotenabhängigkeiten wie npm i ausgeführt.
Die Anwendung wird im Entwicklungsmodus mit aktiviertem Hot-Reloading unter
https://localhost:5001undhttp://localhost:5000gestartet.
Sie müssen sicherstellen, dass Ihr wwwroot leer ist, bevor Sie den Vorgang starten.
Verwenden Sie einfach die normale Art der Veröffentlichung mit der .Net Core-CLI
> dotnet publish YourProject.csproj -c release -o ./publish/Sie können auch alle anderen Parameter über die Dotnet-CLI hinzufügen. Bitte besuchen Sie die MSDN-Website, um mehr darüber zu erfahren.
Dadurch wird Ihr Projekt neu erstellt und anschließend das spezielle Ziel verwendet, um Ihren Client (vuejs) im Produktionsmodus neu zu erstellen.
Wenn Sie hinter einem NginX-Server veröffentlichen, benötigen Sie möglicherweise mehr Konfiguration.
Nehmen wir an, Sie haben Ihre Basissite http://www.example.com und möchten in Ihrer NginX-Konfiguration Ihre Dotnet-App innerhalb von http://www.example.com/myApp haben. In einem solchen Szenario müssen Sie die Basis-URI für index.html festlegen. Anstatt dies manuell zwischen Entwicklung und Produktion zu tun, verfügen Sie über die Datei ./build/base.prod.config.js , die eine mögliche Überschreibung enthält.
Legen Sie Ihre Außerkraftsetzung einfach wie folgt fest:
module . exports = {
baseUriPath : '/myApp/'
}Wenn Sie das nächste Mal veröffentlichen, wird der Pfad dann berücksichtigt und der Basis-URI-Pfad wird automatisch festgelegt.
Das Projekt fügt bereits einige Docker-Container hinzu, die über den Docker Hub verfügbar sind. Sie können das Bild ziehen, wenn Sie möchten. Dadurch wird die Probe lokal verfügbar gemacht. Das Bild verwendet die Alpine-Version und benötigt daher nur einen geringen Platzbedarf.
Da Container in Docker sehr beliebt sind, ist auch eine Dockerfile im Stammordner der Vorlage enthalten. Vergessen Sie nicht die .dockerignore Datei, in der einige Dateien ignoriert werden, um zu verhindern, dass unerwünschte Dateien vor der Veröffentlichung kopiert werden.
Stellen Sie sicher, dass Docker installiert ist.
Der Code verfügt über eine integrierte Gzip-Komprimierung für die HTTPs. Es ist gut, diesen Code zu verwenden, insbesondere wenn Sie Kestrel verwenden. Wenn Sie andernfalls IIS verwenden, entfernen Sie bitte den spezifischen Code in Startup.cs . Normalerweise bietet IIS ein eigenes Komprimierungsmodul an, das leistungsfähiger ist.
Es gibt eine gewisse Automatisierung hinsichtlich der in ./ClientApp/components/**/* verfügbaren Components . Alle Dateien, die mit dem Schlüsselwort „ base beginnen, werden als global deklariert und der Name der Komponente, die irgendwo verwendet werden soll, wird in Groß-/Kleinschreibung ohne das Schlüsselwort base definiert.
Beispiel: baseHelloWorld wird als hello-world registriert und Sie können es in Ihrer Vue-Vorlage verwenden.
< template >
< div >
< hello-world /> works!
</ div >
</ template >Innerhalb des Projekts gibt es für jede Seite ein reales Beispiel für die Kartenkomponente. Der Name der Komponente ist
baseCard.vue.
Das CSS wird nicht generiert, während Sie sich im Entwicklungsmodus befinden. Sie werden nur erstellt, wenn Sie den Befehl dotnet publish verwenden. Alternativ können Sie auch npm run build -- --prod eingeben, wodurch der Produktionsbuild mit der Minimierung und Extraktion der Dateien gestartet wird.
Wichtig: Derzeit bereinigt Webpack den gesamten wwwroot-Ordner innerhalb des .Net-Projekts. Wenn Sie also statische Dateien haben, verschieben Sie diese in den Ordner ./ClientApp/static/ .
Um die Entwicklung zu beschleunigen, bieten wir die Installation der Komponentenbibliothek Element-UI an. Die Dokumentation dieser Bibliothek kann auf seiner Website gefunden werden.
Es kann normal in
main.jsentfernt werden, wenn Sie es nicht benötigen.
