Nuxt.js——基于 Vue 的服务端渲染应用框架

---

前言

Nuxt.js官网

Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架，它可以帮我们轻松的实现同构应用。

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。

我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。

Nuxt.js简单来说是Vue.js的通用框架，最常用的就是SSR（服务端渲染），nuxt.js这个框架，用Vue开发多页面应用，并在服务端完成渲染，可以直接用命令把我们制作的vue项目生成为静态的html。

---

一、知识普及

什么是服务端渲染

后端先调用数据库，获得数据之后，将数据何页面元素进行拼接，组合成完整的html页面，在直接返回给浏览器，以用户浏览。

什么是客户端渲染？

数据由浏览器通过ajax动态取得，再通过js将数据填充到demo元素上最终展示到网页中，这样的过程叫客户端渲染。

服务端渲染与客户端渲染那个更优秀？

服务端渲染需要消耗更多的服务端资源（cpu,内存）

客户端渲染可以将静态资源部署到cdn上，实现高并发。

服务端渲染对seo更友好。

---

二、Nuxt.js的特点

• 基于Vue
• 自动代码分层
• 服务端渲染
• 强大的路由功能，支持异步数据
• 静态文件服务
• EcmaScript6和EcmaScript7的语法支持
• 打包和压缩JavaScript和Css
• HTML头部标签管理
• 本地开发支持热加载
• 集成ESLint
• 支持各种样式预编译器SASS、LESS等等
• 支持HTTP/2推送

Nuxt.js的适用情况？

Nuxt.js适合做博客，电影，咨询，新闻这样的需要收索引擎提供流量的项目，如果要做移动端的项目那么大可没必要只用这个框架了。

---

三、Vue是如何实现服务端渲染的？

安装依赖

npm install vue-cli -g

用npm来安装vue-cli这个框架。
安装完成后可以使用vue -V 来测试是否安装成功。（注意：这里要使用大写的V，小写无效）

使用vue安装 Nuxt

安装好vue-cli后，就可以使用init命令来初始化Nuxt.js项目。

vue init nuxt/starter

这时候他会在github上下载模版，然后会询问你项目的名称叫什么，作者什么的，这些完全可以根据自己的爱好填写。

使用npm install安装依赖包

npm install

这个过程是要等一会的，如果你这个过程安装失败，可以直接诶删除项目中的node_modules文件夹后，重新npm install进行安装。

使用npm run dev 启动服务

npm run dev

---

转载地址