本篇文章主要介绍了详解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布局进行了指定。
结语
感谢您的观看,如有不足之处,欢迎批评指正。
本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。 对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。 最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。