tm nuxtjs starter
1.0.0
Este es mi kit de arranque Vue y una aplicación de demostración mínima pero funcional a partir de agosto de 2018.
Si te sientes cansado de la fatiga de JavaScript y quieres comenzar de manera rápida y fácil, eche un vistazo a esto. Desarrollar una aplicación VUE moderna no se vuelve mucho más simple que esto.
La aplicación de demostración es un sitio estático, una aplicación básica de una sola página que tiene algunas páginas direccionables que son perezosas cargadas a pedido. Demuestra operaciones básicas de CRUD: 1) Listas de películas, 2) Ver detalles de la película, 3) Crear/editar y 4) Eliminar una película.
La demostración utiliza el navegador localstorage para el almacenamiento de datos, lo que significa que se ejecuta sin un backend. Las fuentes contienen un módulo que hace llamadas de AJAX real a un backend de descanso: solo necesita habilitar el módulo y escribir un servidor, y está en buen camino para tener una aplicación web real. He desarrollado Restpie3 Python REST API Server que implementa esta simple API de película como ejemplo.
La aplicación de demostración consta de una pila tecnológica simple pero poderosa que proporciona la funcionalidad esencial para crear aplicaciones web modernas. Se encuentra sobre los hombros de algunas grandes bibliotecas:
├── /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
Aquí le mostramos cómo ejecutar el iniciador en su máquina local:
$ git clone https://github.com/tomimick/tm-nuxtjs-starter
$ cd tm-nuxtjs-starter
$ npm install
$ npm run devLuego apunte a su navegador a http: // localhost: 3000.
Cuando se modifica cualquiera de los archivos dependientes, los cambios se cargan en caliente y se vuelven visibles al instante. ¡Disfruta del desarrollador!
NUXTJS es un gran marco que trae estructura y funcionalidad de spa central a las aplicaciones basadas en Vue. Hace que sea fácil iniciar el desarrollo de la aplicación, permitiéndole concentrarse en su aplicación principal, pero también proporciona prácticas para guiarlo en la creación de una aplicación más complicada.
Nuxt.js beneficia en pocas palabras:
Nuxt.js aprovecha los componentes de un solo archivo de Vue, que es una excelente solución práctica para encapsular la plantilla, la lógica y el estilo de un componente VUE juntos en el mismo archivo fuente.
Nuxt.js está directamente inspirado en NextJS, que es el mismo marco para el ecosistema React. Nuxt.js presenta un poco más de jerarquía, con carpetas para diseños, complementos y middleware.
Dado que NUXTJS tiene las herramientas para admitir el desarrollo de una aplicación con muchos datos y código, uno generalmente necesita algún tipo de solución de gestión de estado para compartir datos en páginas y componentes.
NUXTJS se integra de forma nativa con Vuex State Management Library. Esta es una biblioteca bien elaborada que está escrita por Evan You, el mismo tipo talentoso que creó Vue. Vuex es lo suficientemente simple como para aprender rápidamente. Construye su almacén a partir de datos estatales, y mutaciones y funciones de acción.
Para activar Vuex, simplemente suelte un componente de la tienda en la tienda/ carpeta, donde Nuxt lo recoge y lo pone a disposición de this.$store en todos los componentes de la página Vue. Eso es todo, no se requiere más configuración.
También es posible usar otras bibliotecas estatales como MOBX, pero debido a la integración incorporada, Vuex es una elección natural con NUXTJS.
La capacidad de generar un sitio estático con NUXTJS es una herramienta importante que permite ejecutar aplicaciones sin un servidor de backend. Puede exportar el sitio a las páginas de GitHub, Netlify o Amazon S3. (Pero consulte algunos Gotchas con los prefijos de Sitio+Link con páginas GitHub).
Otra victoria de la generación estática es poder conectar la aplicación con cualquier backend de descanso sin importar cuál sea el lenguaje del backend. La separación limpia de Frontend y Backend también proporciona modularización a nivel tecnológico y posiblemente a nivel de equipo.
Para generar un sitio estático, simplemente ejecute
$ npm run export Y los archivos estáticos se generarán en dist -Folder.
Para probar el sitio estático localmente a través de un servidor WWW local, ejecuto rápidamente un script de Python: (Python3 -M http.server)
$ npm run pyserveY luego pruebe el sitio en http: // localhost: 8000.
NUXTJS funciona bien, generando una página de inicio cuyo tamaño es de solo 69 kb minificado y gzipped . Este es un buen resultado fuera de la caja.
El navegador carga la página de inicio con un total de 4 solicitudes, y cada nueva página que se carga a pedido hace una sola solicitud JS una vez .
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(Informe de mi inspector de tamaño de página de extensión de Chrome).
Vue y React son muy buenas opciones para el desarrollo web moderno: se basan en el concepto moderno de DOM reactivo/virtual, son livianos y son muy populares entre los grandes ecosistemas. Un desarrollador no siempre puede elegir entre estos dos, pero si uno puede, al final, tal vez sea una cuestión de gusto que un desarrollador considera mejor. La decisión de sabor generalmente se reduce a una filosofía de si te gusta JSX o plantillas.
Si puedo elegir mi arma para un proyecto frontal, elegiría Vue. La razón principal para mí es la legibilidad del código y la productividad personal. Puedo leer y escribir plantillas HTML con JavaScript a un lado más fácilmente que JSX. Las carreras jsx largas pueden ser vertiginosas y algo ruidosas. Una plantilla decorada con solo algunas directivas se siente más legible para mí. Me gusta ver los bloques de construcción HTML primero en la línea, no JSX MAP ()-funciones o operadores ternarios o cortocircuitos. Supongo que las plantillas se sienten más naturales para mí debido a mi historia de trabajar con los 3 bloques de construcción primarios de la web, HTML, JS y CSS, mucho antes de que el Sevorial JavaScript se hiciera cargo del mundo.
Aprecio mucho la separación de 3 preocupaciones que se practican en componentes de un solo archivo VUE. Supongo que represento el pensamiento de la vieja escuela que dice que la vista, la lógica y el estilo deberían tener cierta separación entre ellos y no debe mezclarse. Tienen un acoplamiento entre ellos, eso es algo natural, y deben ubicarse cerca del otro, preferiblemente en el mismo archivo fuente, pero no entremezclados. El acoplamiento demasiado apretado puede terminar en espagueti.
Sin embargo, también entiendo las opiniones opuestas que indican que React es mejor sobre Vue, y que argumentan que otra plantilla DSL es el enfoque más débil. Si viene de un fondo de JavaScript, React puede sentirse más natural para usted. Puedo trabajar con ambas opciones (¡incluso hice estos 2 kits de inicio!) Pero tal vez Vue tiene una ligera ventaja para mí.
Si desea leer sobre uno de los debates recientes de Vue vue vue vue react, consulte este hilo de reddit.
Continúe y tome este inicio de Vue y tal vez mi servidor API RESTPIE3 Python REST también y cree su excelente servicio.
También puede contactarme para preguntarme si estoy disponible para el trabajo independiente.
Si prefiere React sobre Vue, también he codificado este mismo iniciador con React Nextjs.
Licencia de MIT
