tm nuxtjs starter
1.0.0
Dies ist mein minimales, aber funktionaler Vue -Starter -Kit und Demo -App ab August 2018.
Wenn Sie sich von JavaScript Müdigkeit satt fühlen und schnell und einfach beginnen möchten, werfen Sie einen Blick darauf. Die Entwicklung einer modernen Vue -App wird nicht viel einfacher als diese.
Die Demo-App ist eine statische Site, eine grundlegende einseitige App, die einige adressierbare Seiten enthält, die faul geladen sind. Es zeigt grundlegende CRUD -Operationen: 1) Filme auflisten, 2) Filmdetails anzeigen, 3) Erstellen/Bearbeiten und 4) einen Film löschen.
Die Demo verwendet Browser LocalStorage für die Datenspeicherung, was bedeutet, dass sie ohne Backend ausgeführt wird. Die Quellen enthalten ein Modul, das echte Ajax -Anrufe auf ein REST -Backend durchführt. Sie müssen das Modul nur aktivieren und einen Server schreiben, und Sie sind in guter Strecke, um eine echte Web -App zu haben. Ich habe RESTPIE3 Python Rest API -Server entwickelt, der diese einfache Film -API als Beispiel implementiert.
Die Demo -App besteht aus einem einfachen, aber leistungsstarken Tech -Stack, der die wesentliche Funktionalität für das Erstellen moderner Web -Apps bietet. Es steht auf den Schultern einiger großer Bibliotheken:
├── /assets/ # assets to be processed by Nuxt
│ └── /layout.sass # main layout of site
├── /components/ # vue components used by pages
│ └── /myheader.vue # site header component
├── /layouts/ # page top-level layouts
│ └── /default.vue # main site layout
├── /pages/ # pages
│ ├── /about.vue # about page
│ ├── /index.vue # home page, lists movies
│ ├── /moviedetails.vue # details page, views a movie
│ └── /movieedit.vue # edit page, edits a movie
├── /static/ # static assets, accessed/exported as is
│ ├── /favicon.ico # favicon
│ └── /exampledata/
│ └── /movies.json # sample list of 4 movies - loaded initially
├── /store/ # data stores managed by Vuex
│ └── /index.js # the single store for this app
├── config.js # app config, select ajax or localstorage
├── nuxt.config.js # nuxtjs config
├── package-lock.json # npm something
├── package.json # list of npm packages required
├── README.md # this doc
├── serverapi_ajax.js # API, talks AJAX to a real backend
└── serverapi_localstorage.js # API, talks to localStorage
Hier erfahren Sie, wie Sie den Starter in Ihrer lokalen Maschine betreiben:
$ git clone https://github.com/tomimick/tm-nuxtjs-starter
$ cd tm-nuxtjs-starter
$ npm install
$ npm run devZeigen Sie dann Ihren Browser auf http: // localhost: 3000.
Wenn eine der abhängigen Dateien geändert wird, sind die Änderungen heiß geladen und werden sofort sichtbar. Genieße den Entwickler!
NuxtJS ist ein großartiges kleines Framework, das Struktur und Kern-SPA-Funktionen in VUE-basierte Apps verleiht. Es macht es einfach, die App -Entwicklung zu starten, und können Sie sich auf Ihre Kern -App konzentrieren, bietet jedoch auch Praktiken, die Sie beim Erstellen einer komplizierteren App leiten können.
Nuxt.js Vorteile auf den Punkt gebracht:
Nuxt.js nutzt die einzelnen Dateikomponenten von VUE, was eine hervorragende praktische Lösung ist, um die Vorlage, Logik und das Styling einer Vue -Komponente in derselben Quelldatei zusammenzunehmen.
Nuxt.js ist direkt von NextJs inspiriert, was für das React -Ökosystem das gleiche Rahmen ist. Nuxt.js führt etwas mehr Hierarchie ein und verfügt über Ordner für Layouts, Plugins und Middleware.
Da NuxtJS über das Tooling verfügt, um die Entwicklung einer App mit vielen Daten und Code zu unterstützen, benötigt man normalerweise eine Art staatlicher Managementlösung, um Daten über Seiten und Komponenten hinweg zu teilen.
NuxtJs integriert sich nativ in die Vuex State Management Library. Dies ist eine gut gestaltete Bibliothek, die von Evan You verfasst wird, demselben talentierten Typ, der Vue geschaffen hat. Vuex ist einfach genug, um schnell zu lernen. Sie erstellen Ihren Geschäft aus staatlichen Daten sowie Mutationen und Aktionsfunktionen.
Um Vuex zu aktivieren, geben Sie einfach eine Store -Komponente im Store/ Ordner fallen, in dem Nuxt sie abholt und es als this.$store in allen Vue -Seitenkomponenten. Das ist alles, dass es keine weitere Konfiguration erforderlich ist.
Es ist auch möglich, andere staatliche Bibliotheken wie MOBX zu verwenden, aber aufgrund der integrierten Integration ist Vuex eine natürliche Wahl bei NuxtJs.
Die Möglichkeit, eine statische Site mit NuxtJS zu generieren, ist ein wichtiges Tool, mit dem Apps ohne Backend -Server ausgeführt werden können. Sie können die Website in GitHub -Seiten, Netlify oder Amazon S3 exportieren. (Überprüfen Sie jedoch ein paar Gotchas mit Site+-Link -Präfixen mit GitHub -Seiten.)
Ein weiterer Sieg der statischen Generation ist es, die App mit einem REST -Backend zu verbinden, unabhängig von der Sprache des Backends. Clean Trennung von Frontend und Backend bietet auch Modularisierung auf technischer Ebene und möglicherweise auf Teamebene.
Um eine statische Site zu generieren, laufen Sie einfach aus
$ npm run export Und die statischen Dateien werden im dist -Folder generiert.
Um die statische Site lokal über einen lokalen WWW -Server zu testen, führe ich schnell ein Python -Skript aus: (Python3 -M http.server).
$ npm run pyserveUnd testen Sie die Website unter http: // localhost: 8000.
Nuxtjs funktioniert gut und erzeugt eine Homepage, deren Größe nur etwa 69 KB Minified und Gziped beträgt. Dies ist ein gutes Ergebnis aus der Box.
Der Browser lädt die Startseite mit insgesamt 4 Anfragen, und jede neue Seite, die On-Demand geladen wird, stellt einmal eine einzige JS-Anfrage aus.
Page Size Inspector Report
URL: https://nuxtjs.tomicloud.com/
REQUEST REQ BYTES
TOTAL___________________________________________4____68,802
Document________________________________________1_______960
-nuxtjs.tomicloud.com/ 960
Script__________________________________________3____67,842
-nuxtjs.tomicloud.com/_.../0b088016842f5f4f735 53,552
-nuxtjs.tomicloud.com/_.../1c78d24f170a4f6d1ea 13,680
-nuxtjs.tomicloud.com/_.../f17a22e19f8ece7f59c 610(Bericht von meinem Chromerweiterungs -Seitengröße Inspector.)
Vue und React sind beide wirklich gute Möglichkeiten für moderne Web Dev: Sie basieren auf dem modernen reaktiven/virtuellen Dom -Konzept, sie sind leicht und sehr beliebt bei großen Ökosystemen. Ein Entwickler kann nicht immer zwischen diesen beiden wählen, aber wenn man kann, ist es am Ende vielleicht eine Frage des Geschmacks, die ein Entwickler besser betrachtet. Die Geschmacksentscheidung hängt normalerweise von einer Philosophie ab, ob Sie JSX oder Vorlagen mögen.
Wenn ich meine Waffe für ein Front-End-Projekt wählen kann, würde ich Vue wählen. Der Hauptgrund für mich ist die Lesbarkeit der Code und die persönliche Produktivität. Ich kann HTML -Vorlagen mit JavaScript leichter lesen und schreiben. Lange JSX -Läufe können schwindelerregend und etwas laut sein. Eine Vorlage, die mit nur wenigen Direktiven dekoriert ist, fühlt sich für mich einfach lesbarer an. Ich mag es, die HTML-Bausteine zuerst in der Linie zu sehen, nicht in JSX MAP ()-Funktionen oder ternären Operatoren oder Kurzschluss. Ich nehme an, Vorlagen fühlen sich für mich natürlicher, weil ich mit den drei Grundbausteinen des Web, HTML, JS und CSS zusammengearbeitet habe, lange bevor der JavaScript -Overlord die Welt übernahm.
Ich schätze die Trennung von 3 Bedenken sehr, die in Vue -Einzeldateikomponenten praktiziert werden. Ich denke, ich repräsentiere das alte Schuldenken, das besagt, dass die Aussicht, Logik und das Styling eine gewisse Trennung zwischen ihnen haben und nicht alles gemischt werden sollten. Sie haben eine Kopplung zwischen ihnen, das ist eine natürliche Sache, und sie sollten sich in der Nähe voneinander befinden, vorzugsweise in derselben Quelldatei, aber nicht gemischt. Eine zu enge Kopplung kann in Spaghetti enden.
Ich verstehe jedoch auch die entgegengesetzten Ansichten, die darauf hinweisen, dass React besser über Vue ist, und die argumentieren, dass eine andere Vorlage DSL der schwächere Ansatz ist. Wenn Sie aus einem JavaScript -Hintergrund stammen, fühlt sich React für Sie möglicherweise natürlicher an. Ich kann mit beiden Auswahlmöglichkeiten arbeiten (ich habe sogar diese 2 Starter -Kits gemacht!), Aber vielleicht hat Vue eine leichte Kante für mich.
Wenn Sie über eine der jüngsten anständigen Vue vs React -Debatten lesen möchten, überprüfen Sie diesen Reddit -Thread.
Nehmen Sie diesen Vue -Starter und vielleicht auch meinen RastPie3 Python Rest API -Server und erstellen Sie Ihren großartigen Dienst.
Sie können mich auch kontaktieren, um zu fragen, ob ich für freiberufliche Arbeit verfügbar bin.
Wenn Sie es bevorzugen, reagieren Sie über Vue, habe ich denselben Starter auch mit React NextJs codiert.
MIT -Lizenz
