共计 1510 个字符，预计需要花费 4 分钟才能阅读完成。
本篇文章主要介绍了详解 Nuxt.js Vue 服务端渲染摸索，写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。
Nuxt.js 十分简单易用。一个简单的项目只需将 nuxt 添加为依赖组件即可。Vue 因其简单易懂的 API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用 vue 进行项目开发，我们正在使用的简书，便是基于 Vue 来构建的。我们知道，SPA 前端渲染存在两大痛点：（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面 meta 信息和其他 SEO 相关信息，使网站无法在搜索引擎中被用户搜索到。（2）用户体验。大型 webApp 打包之后的 js 会很庞大，于是就有了按模块加载，像 require.js 一样，异步请求。webpack 盛行，就变成了代码分割。即便如此，受制于用户设备，页面初次渲染还是有可能很慢，白屏等待时间太长，对日益挑剔的用户群体来说，无法接受。因此，对于那些展示宣传型页面，如官网，必须进行服务端渲染（SSR）。安装 nuxt.js
$ vue init nuxt-community/starter-template < 你项目的名字 >
// 后面 安装依赖你懂的
// 安装 koa 版本
$ vue init nuxt/koa < 你的项目名字 >
运行
npm run dev
应用现在运行在 http://localhost:3000 注意：Nuxt.js 会监听 pages 目录中的文件变更并自动重启，当添加新页面时没有必要手工重启应用。
路由
nuxt 是根据 pages 目录结构生成路由配置
异步数据 asyncData
注意必须要页面组件才能调用 asyncData(就是 components 下是不能调用，必须路由的页面才行)
异步数据 beforeCreate，created
注意：在任何 vue 组件的生命周期内，只有 beforeCreate 和 created 这两个钩子会在浏览器端和服务端均被调用；其他的钩子都只会在浏览器端调用。
使用插件 mint-ui
首先我们需要在 plugins 文件夹中添加插件文件 mint-ui.js
import Vue from “vue”;
import Mint from “mint-ui”;
// 欢迎加入前端全栈开发交流圈一起学习交流：864305860
Vue.use(Mint);
在 nuxt.config.js 中配置 plugins 字段
/**
* 配置第三方插件
*/
plugins: [{src: “~plugins/mint-ui”, ssr: true}],
// 欢迎加入前端全栈开发交流圈一起学习交流：864305860
// 同时 nuxt 还支持区分只在浏览器中运行和只在服务端运行的插件
// 只在浏览器运行：配置 nuxt.config.js 中 plugins 字段，将引入的插件属性设置为 ssr：false
// 只在服务端运行：直接在 webpack 打包 server.bundle.js 文件中，将 process.SERVER_BUILD 设置为 true 即可
layout 布局
1.nuxt.js 实现了一个新的概念，layout 布局，我们可以通过 layout 布 局方便的实现页面的多个布局之间方便的切换。本项目中实现了三种常用的布局，即：1）两栏布局，左栏固定，右栏动态宽度；2、错误页提示，页面中间一个提示框的布局方案；3、纯白页面布局。具体开发的页面中，如果使用默认布局，则不需指定页面的布局，nuxt 框架会自动对没有指定布局的页面和 default 布局进行关联。如果需要指定布局，则在 layout 字段中对布局进行指定。如图在 login 页面中对 full 布局进行了指定。
结语
感谢您的观看，如有不足之处，欢迎批评指正。
