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

通过官方文档，我们可以：

• 创建一个 nuxt.js 项目

• 知道 nuxt.js 有哪些API,哪些用法
  我们是否要现在去搭建一个 nuxt.js 项目呢？是的，根据 GUIDES 来搭建一个项目吧：
  第一种方式是自己创建文件，安装 nuxt 的方式

• 创建一个空的文件夹

• vscode 打开文件夹

• 创建 package.json 文件，这个文件的作用相当于一个项目的id card.

• 安装 nuxt.js , npm install nuxt，会在 package.json 文件夹自动加上 nuxt 依赖，以及 node_modules 文件。
  

• 创建 pages 页面，在 pages 页面下面创建 .vue 文件

• npm run dev
  
  打开页面可以看到加载页面返回的资源：
  
  
  
  可以看到返回的文档信息包括是页面展示的完整信息。而平常我们的项目是下面这个样子的：
  
  body 里面返回的 div 是一个有id标识的空的body。

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

Nuxt.js 和 Vue.js 的区别

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

• Router
• Main App.vue component

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