其他分享
首页 > 其他分享> > Nuxt.js学习

Nuxt.js学习

作者:互联网

为什么要学 Nuxt.js ?

目前我也没有使用 Nuxt.js 技术,公司项目里面没有使用到,自己没去做过这方面的内容,主要原因是目前不需要使用,但是有些公司已经在使用了,并且因为它解决了一些问题,虽然同时也带来了另一些问题,但是各有各的使用场景嘛,还是了解了解吧,待我们需要使用的时候,会更加的快速,以及跟更加深理解。

Nuxt 的使用场景

虽然我们现在接触的项目使用服务器端渲染比较少,但总是有一些特殊的项目有特殊的需求,需要特殊处理才能满足
Nuxt.js是一个建立在Vue.js上的前端框架,它提供了很好的开发特性,比如服务器端渲染、自动生成路由、改进的元标签管理和SEO改进。最重要是应该就是更好支持 SEO了。
为了改善SEO,Nuxt.js使用SSR(服务器端渲染)。SSR在获取AJAX数据后将Vue.js组件渲染为服务器(Node.js)上的HTML字符串。完成所有异步逻辑后,它将它们直接发送到浏览器,然后最终将静态标记提供给客户端上的完全交互式应用程序。此功能允许使用Google SEO解析器很好地解析DOM元素。 SEO解析器在加载网站DOM时立即以巨大的速度解析DOM元素。
另一方面,典型的SPA应用程序是用Vue这样的框架构建的 Vue.js、React、Angular等都是在DOM加载后用AJAX从后端获取数据,因此SEO解析器无法解析所有的DOM元素,因为它们还没有渲染。AJAX提取是异步的,而SEO解析则不是。

官方文档

最好的学习资料当然是官方文档了,它可以带你用最简单的方式创建一个Nuxt.js项目。https://www.nuxtjs.cn/guide
在这里插入图片描述
通过官方文档,我们可以:

第二种方式是使用脚手架创建项目 npm init nuxt-app
现在是一个最简单的项目,但是我们的项目就是在这个基础上去开发的,Nuxt.js 框架是和 Vue.js 框架有什么异同呢?

Nuxt.js 和 Vue.js 的区别

Nuxt.js与Vue.js具有非常相似的体系结构。只有两个主要区别:

Nuxt根据页面的目录和文件结构生成路由器逻辑及其路由。例如,如果我们创建目录和文件 about/index.vue,则Nuxt.js会自动为该页面创建路线 /about。无需在应用程序中的其他任何地方定义或配置路由。

对于嵌套路由,只需要在父目录内创建一个目录——about/me/index.vue 将生成 about/me 路由。对于创建动态嵌套路由或嵌套路由参数,所需要做的就是用lodash前缀命名子目录—— user/_id /index.vue 将根据用户的ID为用户创建动态嵌套路由。

Nuxt.js的另一个与结构相关的功能非常有趣——布局。Vue.js应用程序具有主App.vue文件,该文件是所有应用程序组件的主要根组件包装。Nuxt.js使用布局,其中每个布局都充当应用程序组件的单独包装。例如,如果我们希望某些特定的页面使用不同的UI库、全局CSS样式、字体族、设计系统、元标记或其他元素,我们可以定义使用什么布局作为其父根组件。默认情况下,所有的 Nnux.js 页面都使用 default.vue 布局。

Nuxt.js中的Vuex的结构几乎与通常的Vue.js环境相同——带有 store 模块。这种结构化是可选的,但强烈建议您进行更好的结构和代码维护。每个 store 都应基于应用程序逻辑和数据流进行结构化和模块化。例如,如果应用程序包含授权逻辑,则我们必须创建用于 store 所有授权数据和逻辑的授权 store 模块,例如登录,注销,cookie,令牌,用户数据等。

总结

要真正理解Nuxt.js框架的功能和好处,还需要花费时间,试错和大量代码实践。

参考资料

https://developer.51cto.com/article/614400.html

标签:Vue,创建,页面,js,学习,nuxt,Nuxt
来源: https://blog.csdn.net/qq_40409143/article/details/123639872