普歌-nuxt.js基础

一、Nuxt.js简介

---

官网：https://zh.nuxtjs.org

需求分析

• 采用vue.js开发的应用系统SEO不友好，需要解决SEO的问题
• 比如：新闻门户 博客系统有SEO的需求，希望被搜索引擎收录，百度排名靠前等。

了解搜索引擎优化SEO

利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。

服务器渲染和客户端渲染（SSR）

---

什么是客户端渲染

1. 浏览器（客户端）通过AJAX向服务器（java servlet）发送http请求数据接口。
2. 服务器将获取的接口数据封装成JSON，响应给浏览器。
3. 浏览器拿到JSON就进行渲染html页面，生成DOM元素，然后将页面展示给用户。

客户端渲染特点：

1. 服务器只响应数据，不生成html页面
2. 浏览器（客户端）负责发送请求获取服务端的数据，然后渲染成html页面。

什么是服务端渲染（SSR）

1. 浏览器（客户端）向服务端（Java servlet）发送http请求数据接口。
2. 服务器（servlet）会生成html页面，响应给浏览器。
3. 浏览器直接将接收到的html页面进行展示

服务端渲染特点：

1. 在服务端生成html页面。
2. 浏览器（客户端）只负责html元素内容。

为什么使用服务器端渲染（SSR）

与传统的SPA（单页面应用程序）相比，服务端渲染的优势主要有哪些：

• 更好的SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。如果你的应用程序初始展示Loading菊花图，然后通过Ajax获取内容，抓取工具并不会等待完成后在进行抓取页面内容。也就是说，如果SEO对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染（SSR）解决此问题。
• 更快的内容到达时间（首屏加载更快），因为服务端只需要返回渲染好的HTML，这部分代码量很小的，所以用户体验更好。

使用服务器端渲染（SSR）时还需要有一些权衡之处：

• 首先就是开发成本比较高，比如某些声明周期钩子函数（如beforeCreate、created）能同时运行在服务端和客户端，因此第三方库要做特殊处理，才能在服务器渲染应用程序中运行。
• 由于服务端渲染要用Node.js做中间层，所以部署项目时，需要处于Node.js sever运行环境。在高流量环境下，还要做好服务器负载和缓存策略。

二、Vue.js如何实现SSR

1. 基于官网Vue SSR指南文档的官方方案，官方方案具有更直接的控制应用程序的结构，更深入底层，更加灵活，同时在使用官方方案的过程中，也会对Vue SSR有更加深入的了解。
2. vue.js通用应用框架NUXT，NUXT提供了平滑的开箱即用的体验，它建立在vue.js技术栈之上，但抽象出很多模板，并提供了一些额外的功能，例如静态站点生成。通过NUXT可以根据约定的规则，快速的实现Vue SSR。

Nuxt.js工作原理

1. 浏览器（客户端）发送http请求到Node.js服务端。
2. 部署在Node.js的应用Nuxt.js接收到浏览器请求，他会去请求后台接口服务端。
3. 后台接口服务端会响应JSON数据，Nuxt.js获取数据后进行服务端渲染成html。
4. 然后Nuxt.js将html页面响应给浏览器。
5. 浏览器直接将接收到html页面进行展示。

三、搭建Nuxt环境和创建项目

开发环境

1. 安装node.js & npm

   https://nodejs.org/zh-cn/

2. 安装Vscode

   https://code.visualstudio.com/

安装脚手架工具和创建项目

为了快速入门，Nuxt.js团队创建了脚手架工具create-nuxt-app。

NPM方式

1. 全局安装create-nuxt-app

$ npm install -g create-nuxt-app

如果用的是MAC电脑，可能报错：permission denied,access'/usr/local/lib/node_modules'

原因：执行命令行命令时没有获得管理员权限，输入电脑的管理员密码（开机密码）
解决：命令前面加上sudo

$ sudo npm install -g create-nuxt-app

2. 然后用create-nuxt-app初始化项目

$ create-nuxt-app <项目名>

示例：创建nuxt-demo1项目

$ create-nuxt-app <nuxt-demo1>

3. 如果需要卸载create-nuxt-app，可执行下面命令

 # windows
 $ npm uninstall -g create-nuxt-app
 
 # MAC
 $ sudo npm uninstall -g create-nuxt-app

NPX方式

确保安装了npx（npx在NPM版本5.2.0默认安装了），npx是npm的高级版本，npx具有强大的功能。
作用是避免全局安装模块：npx临时安装一个create-nuxt-app模块，来初始化项目，使用过后会自动删除create-nuxt-app模块（下面不需要全局安装）

1. 直接初始化项目

 $ npx create-nuxt-app <项目名>

示例：创建nuxt-demo2项目

 $ npx create-nuxt-app <nuxt-demo2>

2. 当运行完时，它将安装所有依赖项，然后启动项目

 $ cd nuxt-demo2
 $ npm run dev

---

作者：Cnc_zj
本文源自：Cnc_zj的《nuxt.js基础》
本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。