tm nuxtjs starter
1.0.0
Este é o meu kit de partida e demonstração mínimo, mas funcional, e o aplicativo de demonstração em agosto de 2018.
Se você se sentir cansado da fadiga de JavaScript e deseja começar rápido e fácil, dê uma olhada nisso. O desenvolvimento de um aplicativo Vue moderno não fica muito mais simples que isso.
O aplicativo de demonstração é um site estático, um aplicativo básico de página única que possui algumas páginas endereçáveis que são com preguiçosas sob demanda. Ele demonstra operações básicas do CRUD: 1) Listar filmes, 2) Ver detalhes do filme, 3) Criar/editar e 4) Excluir um filme.
A demonstração usa o navegador LocalSorage para o armazenamento de dados, o que significa que ele é executado sem um back -end. As fontes contêm um módulo que faz chamadas reais de Ajax para um back -end de descanso - você só precisa ativar o módulo e escrever um servidor, e você está em uma boa faixa para ter um aplicativo da Web real. Eu desenvolvi o servidor API Restpie3 Python Rest, que implementa essa API de filme simples como exemplo.
O aplicativo de demonstração consiste em uma pilha de tecnologia simples, mas poderosa, que fornece a funcionalidade essencial para criar aplicativos da web modernos. Está nos ombros de algumas ótimas 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
Veja como administrar o motor de partida em sua máquina local:
$ git clone https://github.com/tomimick/tm-nuxtjs-starter
$ cd tm-nuxtjs-starter
$ npm install
$ npm run devEm seguida, aponte seu navegador para http: // localhost: 3000.
Quando qualquer um dos arquivos dependentes é modificado, as alterações são carregadas a quente e ficam visíveis instantaneamente. Aproveite o dev!
O NUXTJS é uma ótima estrutura que traz estrutura e funcionalidade do spa de núcleo para aplicativos baseados em Vue. Isso facilita o início do desenvolvimento do aplicativo, permitindo que você se concentre no seu aplicativo principal, mas também fornece práticas para guiá -lo na criação de um aplicativo mais complicado.
Nuxt.js se beneficia em poucas palavras:
Nuxt.js aproveita os componentes de arquivo único da Vue, que é uma excelente solução prática para encapsular o modelo, a lógica e o estilo de um componente VUE juntos no mesmo arquivo de origem.
O Nuxt.js é diretamente inspirado nos NextJs, que é a mesma estrutura para o ecossistema React. O Nuxt.js apresenta um pouco mais de hierarquia, com pastas para layouts, plugins e middleware.
Como o NuxtJS possui a ferramenta para apoiar o desenvolvimento de um aplicativo com muitos dados e código, geralmente é necessário algum tipo de solução de gerenciamento de estado para compartilhar dados nas páginas e componentes.
O NUXTJS se integra nativamente à Vuex State Management Library. Esta é uma biblioteca bem criada, de autoria de Evan, o mesmo talentoso cara que criou Vue. Vuex é simples o suficiente para aprender rapidamente. Você constrói sua loja a partir de dados do estado, mutações e funções de ação.
Para ativar a Vuex, basta soltar um componente de loja na loja/ pasta, de onde o Nuxt o pega e o disponibiliza this.$store em todos os componentes da página Vue. Isso é tudo, nenhuma configuração adicional é necessária.
Também é possível usar outras bibliotecas estaduais como o MOBX, mas devido à integração interna, o Vuex é uma escolha natural com o NUXTJS.
A capacidade de gerar um site estático com o NUXTJS é uma ferramenta importante que possibilita a execução de aplicativos sem um servidor de back -end. Você pode exportar o site para as páginas do GitHub, Netlify ou Amazon S3. (Mas verifique alguns petchas com o site+prefixos de link com páginas do Github.)
Outra vitória da geração estática é poder conectar o aplicativo com qualquer back -end de repouso, independentemente do idioma do back -end. A separação limpa do front -end e do back -end também fornece modularização no nível da tecnologia e, possivelmente, no nível da equipe.
Para gerar um site estático, basta executar
$ npm run export E os arquivos estáticos serão gerados na dist .
Para testar o site estático localmente por meio de um servidor local www, eu rapidamente corro um script python: (python3 -m http.server)
$ npm run pyserveE depois teste o site em http: // localhost: 8000.
O NUXTJS tem um bom desempenho, gerando uma página inicial cujo tamanho é de apenas 69kb Minified e Gzipped . Este é um bom resultado fora da caixa.
O navegador carrega a página inicial com um total de 4 solicitações, e cada nova página carregada sob demanda faz uma única solicitação JS uma 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(Relatório do meu inspetor de tamanho de página de extensão do Chrome.)
O Vue e o React são escolhas realmente boas para o Dev Modern Web: eles são baseados no conceito de DOM reativo/virtual moderno, são leves e imensamente populares entre os grandes ecossistemas. Um desenvolvedor nem sempre pode escolher entre esses dois, mas se alguém pode, no final, talvez seja uma questão de gosto que um desenvolvedor considera melhor. A decisão do paladar geralmente se resume a uma filosofia de você gosta de JSX ou modelos.
Se eu puder escolher minha arma para um projeto de front-end, escolheria Vue. O principal motivo para mim é a legibilidade do código e a produtividade pessoal. Eu posso ler e escrever modelos HTML com JavaScript de lado com mais facilidade do que o JSX. As longas corridas JSX podem ser estonteantes e um tanto barulhentas. Um modelo decorado com apenas algumas diretrizes parece mais legível para mim. Gosto de ver os blocos de construção HTML primeiro na linha, não o JSX Map ()-funções ou operadores ternários ou curtos-circuitos. Suponho que os modelos me pareçam mais naturais por causa da minha história de trabalhar com os três blocos de construção do ensino fundamental da web, HTML, JS e CSS, muito antes de o Javascript Overlord assumir o mundo.
Agradeço muito a separação de três preocupações praticadas em componentes de arquivo único Vue. Acho que represento o pensamento da velha escola que diz que a visão, a lógica e o estilo devem ter alguma separação entre eles e não devem ser mistas. Eles têm acoplamento entre eles, isso é uma coisa natural, e devem estar localizados perto um do outro, de preferência no mesmo arquivo de origem, mas não misturados. O acoplamento muito apertado pode acabar em espaguete.
No entanto, também entendo as visões opostas que afirmam que o React é melhor sobre o vue e que argumentam que outro modelo DSL é a abordagem mais fraca. Se você vier de um fundo JavaScript, o React pode parecer mais natural para você. Eu posso trabalhar com as duas opções (até fiz esses dois kits iniciantes!) Mas talvez Vue tenha uma pequena vantagem para mim.
Se você quiser ler sobre um dos recentes debates decentes vue vs react, verifique este thread Reddit.
Vá em frente e pegue este Vue Starter e talvez o meu servidor API Restpie3 Python Rest também e crie seu ótimo serviço.
Você também pode entrar em contato comigo para perguntar se estou disponível para o trabalho freelancer.
Se você preferir reagir sobre o VUE, também codifiquei o mesmo iniciante com o React NextJs.
MIT Licença
