Estou participando do "Nuggets·Plano Inicial"
Introdução ao Nuxt.js
Nuxt.js é uma estrutura de aplicativo geral baseada em Vue.js.
Por meio da organização abstrata da infraestrutura cliente/servidor, o Nuxt.js se concentra principalmente na renderização da interface do usuário de aplicativos .
Nosso objetivo é criar uma estrutura de aplicativo flexível com base na qual você pode inicializar o código de infraestrutura de um novo projeto ou usar o Nuxt.js em um projeto Node.js existente.
O Nuxt.js predefiniu várias configurações necessárias para desenvolver aplicativos renderizados do lado do servidor usando o Vue.js.
o que é SPA
SPA (aplicativo da Web de página única) é um aplicativo da Web de página única. A Web não é mais uma página, mas um aplicativo geral, um aplicativo composto por um sistema de roteamento, um sistema de dados, um sistema de página (componente) e assim por diante .
O Vue que aprendemos antes é o melhor em SPA.
Os aplicativos SPA são amplamente utilizados em cenários que não exigem altos requisitos de SEO
Soluções de SEO: serão 页面和数据integradas antecipadamente
o que é SEO
Compreendendo como vários mecanismos de pesquisa rastreiam páginas da Internet, como indexá-las e como determinar sua classificação de resultados de pesquisa para uma palavra-chave específica e outras tecnologias, podemos otimizar o conteúdo da página da Web para que esteja em conformidade com os hábitos de navegação dos usuários Uma tecnologia que melhora as classificações do mecanismo de pesquisa sem comprometer a experiência do usuário, aumentando assim as visitas ao site e, por fim, melhorando as vendas ou a publicidade.
- SEO: Search Engine Optimization (Otimização para Motores de Busca), através de várias técnicas (meios) para garantir que o nosso conteúdo web seja maximizado pelos motores de busca, maximiza o peso, e acaba por trazer mais tráfego.
- É bastante óbvio que os programas de SPA são ruins para SEO
Soluções de SEO: serão 页面和数据integradas antecipadamente
- Front-end: usando SSR
- Backend: página estática (freemarker, thymeleaf, speed)
O que é a renderização do lado do servidor da tecnologia SSR (Server Side Render), ou seja: a página da web é gerada pela renderização do lado do servidor e depois enviada para o cliente.
在SSR中，前端分成2部分：前端客户端、前端服务端 前端服务端，用于发送ajax，获得数据 前端客户端，用于将ajax数据和页面进行渲染，渲染成html页面，并响应给调用程序（浏览器、爬虫）
如果爬虫获得html页面，就可以启动处理程序，处理页面内容，最终完成SEO操作。
SPA和SSR对比
SPA单页应用程序
SSR服务器端渲染
优势
1.页面内容在客户端渲染 2. 只关注View层，与后台耦合度低，前后端分离 3.减轻后台渲染画面的压力
1.更好的SEO，搜索引擎工具可以直接查看完全渲染的画面 2.更快的内容到达时间 (time-to-content)，用户能更快的看到完整渲染的画面
劣势
1.首屏加载缓慢 2.SEO(搜索引擎优化)不友好
1.更多的服务器端负载 2.涉及构建设置和部署的更多要求，需要用Node.js渲染 3.开发条件有限制，一些生命周期将失效 4.一些常用的浏览器API无法使用
Nuxt.js
Nuxt.js 是一个基于 Vue.js 的通用应用框架。
Nuxt支持vue的所有功能，此类内容为前端客户端内容。 Nuxt特有的内容，都是前端服务端内容。 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。
Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。
nuxt 上手实战
create-nuxt-app 介绍
-
Nuxt.js 提供了脚手架工具
create-nuxt-app -
create-nuxt-app需要使用npx
（1）安装NodeJS
这里不做讲解了，只要npm的版本不低于5.2.0版本即可。
（2）registry配置
Se a intranet da empresa fornecer um endereço de biblioteca de produto semelhante, o valor do registro pode ser definido para o endereço específico da intranet da empresa; se a Internet chinesa for usada, é melhor definir o valor do registro para a imagem NPM do Taobao, ou seja, registro .npm.taobao.org. Podemos adicionar diretamente o registro=https://registry.n… no arquivo .npmrc
npm config set registro Registry.npm.taobao.org
(3) Instale o andaime create-nuxt-app
Digite o comando npm i -g create-nuxt-app na janela cmd, pressione a tecla Enter e aguarde o processo de instalação. O efeito final é mostrado na figura abaixo:
melhoria nuxtjs
comece
npm run dev
复制代码Acesso local a http://localhost:3000/
nome do diretório
descrever
O diretório de recursos assets é usado para armazenar recursos estáticos que precisam ser compilados. Por exemplo: LESS, SASS, etc. Por padrão, o Nuxt usa vários carregadores Webpack para processar arquivos no diretório
diretório de componentes de componentes, o Nuxt.js não aprimorará este diretório e não oferece suporte a SSR
layouts diretório de componentes de layout
pages diretório da página, todas as exibições vue, o nuxt gera automaticamente as rotas correspondentes de acordo com a estrutura do diretório.
diretório de plug-ins
static Diretório de arquivos estáticos, arquivos que não precisam ser compilados
armazenar diretório vuex
nuxt.config.js arquivo de configuração personalizada nuxt, o conteúdo substituirá o padrão
arquivo de configuração do projeto package.json