详解Nuxt.js Vue服务端渲染摸索
栏目: 编程语言 · JavaScript · 发布时间: 6年前
内容简介：本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文采用nuxt进行服务端渲染https://zh.nuxtjs.org/
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"; Vue.use(Mint);
在nuxt.config.js中配置plugins字段
/**
* 配置第三方插件
*/
plugins: [{ src: "~plugins/mint-ui", ssr: true }],
//同时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布局进行了指定。
以上所述就是小编给大家介绍的《详解Nuxt.js Vue服务端渲染摸索》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- 从0到1，小白的前端摸索之路
- Android 开发如何避免被淘汰？我摸索出一条路！
- Red Team服务如何促进防护能力提升——浅谈红蓝对抗的实践与摸索
- Octane渲染入门-渲染设置图文版
- 通过分析 WPF 的渲染脏区优化渲染性能
- React 服务器端渲染和客户端渲染效果对比
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
