当前位置: 首页 > Web前端 > HTML

初看nuxt.js总结

时间:2023-04-02 22:54:58 HTML

先介绍nuxt.js什么是Nuxt.js?Nuxt.js是一个基于Vue.js的通用应用程序框架。通过客户端/服务器基础架构的抽象组织,Nuxt.js主要关注应用程序的UI渲染。我们的目标是创建一个灵活的应用程序框架,您可以在此基础上初始化新项目的基础设施代码,或者在现有的Node.js项目中使用Nuxt.js。Nuxt.js预设了使用Vue.js开发服务端渲染应用程序所需的各种配置。此外,我们还提供了一个命令:nuxtgenerate,它提供了为基于Vue.js的应用程序生成相应静态站点的功能。我们相信,此命令提供的功能是开发集成各种微服务的Web应用程序的新步骤。Nuxt.js作为一个框架,为客户端/服务端的典型应用架构模式提供了很多有用的特性,比如异步数据加载、中间件支持、布局支持等。如果这是官网,对我们来说就简单了,Nuxt是一个基于Vue的应用框架,使用服务端渲染,让你的SPA应用(Vue)也能有SEO。下面创建我们的第一个nuxt项目npxcreate-nuxt-app注意选择自己想要的Nuxt模式(UniversalorSPA),先给出推荐的选项:Universal推荐理由:可以这样随便说,使用nuxt的人大部分是为了解决SEO问题,而Universal和Spa的区别只是在于seo实现上的区别。在我基于nuxt的个人博客中,使用了google的免费xml工具自动生成站点地图,即sitemap.xml文件。如下:当项目选择Spa模式时:当项目选择Universal模式时:可以看到区别,spa是单页的,所以只有一个入口文件,sitemap只有一个url,会导致网站费尽心思打造的服务端渲染。最多只有一页可以被搜索引擎收录。而且Universal可以实现所有网站路径完全包含,这也是我们当初使用nuxt的初衷。附件:sitemap.xml站点地图,主要作用是告知搜索引擎站点中的链接,引导抓取和收录。一般可以放在站点的根目录下(也有主动推送给网络爬虫的方法,这里不做讨论)。包含的主要信息是链接、最后修改时间和优先级。Google的免费xml生成工具https://www.xml-sitemaps.com需要FQ和梯子。这个参考https://www.cnblogs.com/hcxy/...我的选择是生成Universal目录,这里介绍的就是这些。这就是今天的全部内容https://zh.nuxtjs.org/guide/i...