tm nuxtjs starter
1.0.0
Ceci est mon kit de démarrage et application de démonstration Vue minimaux mais fonctionnels en août 2018.
Si vous vous sentez fatigué de la fatigue de JavaScript et que vous voulez commencer rapidement et facile, jetez un coup d'œil à cela. Développer une application Vue moderne ne devient pas beaucoup plus simple que cela.
L'application de démonstration est un site statique, une application de base à une seule page qui a quelques pages adressables qui sont chargées paresseuses à la demande. Il démontre des opérations de base CRUD: 1) Liste des films, 2) Afficher les détails du film, 3) Créer / modifier et 4) Supprimer un film.
La démo utilise le navigateur localstorage pour le stockage de données, ce qui signifie qu'il s'exécute sans backend. Les sources contiennent un module qui fait de vrais appels AJAX vers un backend de repos - il vous suffit d'activer le module et d'écrire un serveur, et vous êtes en bonne voie pour avoir une véritable application Web. J'ai développé le serveur API RESTPIE3 Python REST qui implémente cette API de film simple comme exemple.
L'application de démonstration se compose d'une pile technologique simple mais puissante qui fournit les fonctionnalités essentielles pour créer des applications Web modernes. Il se tient sur les épaules de quelques grandes bibliothèques:
├── /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
Voici comment exécuter le démarreur dans votre machine locale:
$ git clone https://github.com/tomimick/tm-nuxtjs-starter
$ cd tm-nuxtjs-starter
$ npm install
$ npm run devPointez ensuite votre navigateur sur http: // localhost: 3000.
Lorsque l'un des fichiers dépendants est modifié, les modifications sont chargées à chaud et deviennent visibles instantanément. Profitez du développement!
NuxtJS est un excellent petit cadre qui apporte la structure et la fonctionnalité de Core Spa aux applications basées sur Vue. Il est facile de démarrer le développement d'applications, vous permettant de vous concentrer sur votre application principale, mais fournit également des pratiques pour vous guider dans la création d'une application plus compliquée.
Nuxt.js Avantages en un mot:
Nuxt.js tire parti des composants de fichiers uniques de Vue, qui est une excellente solution pratique pour encapsuler le modèle, la logique et le style d'un composant VUE dans le même fichier source.
Nuxt.js est directement inspiré par NextJS qui est le même cadre pour l'écosystème React. Nuxt.js présente un peu plus de hiérarchie, ayant des dossiers pour les dispositions, les plugins et le middleware.
Étant donné que NuxtJS dispose de l'outillage pour prendre en charge le développement d'une application avec beaucoup de données et de code, il faut généralement une sorte de solution de gestion d'état pour partager des données sur les pages et les composants.
NuxtJS s'intègre nativement à la bibliothèque de gestion de l'État Vuex. Il s'agit d'une bibliothèque bien conçue qui est écrite par Evan You, le même gars talentueux qui a créé Vue. Vuex est assez simple pour apprendre rapidement. Vous construisez votre magasin à partir des données d'état, des mutations et des fonctions d'action.
Pour activer Vuex, il vous suffit de supprimer un composant de magasin dans le magasin / dossier, où Nuxt le ramasse et le rend disponible comme this.$store dans tous les composants de la page Vue. C'est tout pour cela, aucune autre configuration n'est requise.
Il est également possible d'utiliser d'autres bibliothèques d'État comme MOBX, mais en raison de l'intégration intégrée, Vuex est un choix naturel avec NuxtJS.
La possibilité de générer un site statique avec NuxtJS est un outil important qui permet d'exécuter des applications sans serveur backend. Vous pouvez exporter le site vers les pages GitHub, Netlify ou Amazon S3. (Mais vérifiez quelques gotchas avec des préfixes de site + de liens avec les pages GitHub.)
Une autre victoire de la génération statique est de pouvoir connecter l'application avec n'importe quel backend de repos quelle que soit la langue du backend. La séparation propre du frontend et du backend fournit également la modularisation au niveau technologique et peut-être au niveau de l'équipe.
Pour générer un site statique, exécutez simplement
$ npm run export Et les fichiers statiques seront générés dans le dist -Folder.
Pour tester le site statique localement via un WWW-Server local, j'exécute rapidement un script Python: (Python3 -M http.server)
$ npm run pyservePuis testez le site à http: // localhost: 8000.
Nuxtjs fonctionne bien, générant une page d'accueil dont la taille n'est que d'environ 69 Ko minifiée et gziped . C'est un bon résultat hors de la boîte.
Le navigateur charge la page d'accueil avec un total de 4 demandes, et chaque nouvelle page chargée à la demande fait une seule demande JS une fois .
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(Rapport par mon inspecteur de taille de page d'extension Chrome.)
Vue et React sont tous deux de très bons choix pour le développement Web moderne: ils sont basés sur le concept réactif / virtuel moderne / virtuel, ils sont légers et extrêmement populaires auprès des grands écosystèmes. Un développeur ne peut pas toujours choisir entre ces deux-là, mais si l'on peut, à la fin, il peut peut-être une question de goût qu'un développeur considère mieux. La décision de goût revient généralement à une philosophie de savoir si vous aimez le JSX ou les modèles.
Si je peux choisir mon arme pour un projet frontal, je choisirais Vue. La principale raison pour moi est la lisibilité du code et la productivité personnelle. Je peux lire et écrire des modèles HTML avec JavaScript de côté plus facilement que JSX. De longues courses JSX peuvent être vertigineuses et quelque peu bruyantes. Un modèle décoré avec seulement quelques directives me semble plus lisible. J'aime voir les blocs de construction HTML en premier dans la ligne, pas JSX MAP () - fonctions ou opérateurs ternaires ou court-circuits. Je suppose que les modèles me semblent plus naturels en raison de mon histoire de travail avec les 3 éléments élémentaires du Web, HTML, JS et CSS, bien avant que le suzerain JavaScript ne prenne le contrôle du monde.
J'apprécie fortement la séparation de 3 préoccupations qui sont pratiquées dans les composants de fichier unique Vue. Je suppose que je représente la pensée de la vieille école qui dit que la vue, la logique et le style devraient avoir une certaine séparation entre eux et ne devrait pas être mélangé. Ils ont un couplage entre eux, c'est une chose naturelle, et ils devraient être situés les uns des autres, de préférence dans le même fichier source, mais pas entremêlés. Un couplage trop serré peut se retrouver dans des spaghettis.
Cependant, je comprends également les opinions opposées qui indiquent que la réaction est meilleure sur Vue et qui soutiennent qu'un autre modèle DSL est l'approche la plus faible. Si vous venez d'un fond JavaScript, React peut vous sentir plus naturel pour vous. Je peux travailler avec les deux choix (j'ai même fait ces 2 kits de démarrage!) Mais peut-être que Vue a un léger avantage pour moi.
Si vous souhaitez lire sur l'un des débats récents Vue vs React, consultez ce fil Reddit.
Allez-y et prenez ce démarreur VUE et peut-être mon serveur API RESTPIE3 Python REST également et créez votre excellent service.
Vous pouvez également me contacter pour me demander si je suis disponible pour le travail indépendant.
Si vous préférez React à Vue, j'ai également codé ce même démarreur avec React NextJS.
Licence MIT
