nuxt.js面试篇
介绍
- 基于 Vue.js 的通用应用框架。
- SSR 服务端渲染。在服务端生成html发送至客户端
- 特性:异步数据加载、中间件支持、布局支持等。
- 优点:有利于SEO,加载速度快,自动配置路由
- 依赖 node 和 npm npx(npx在NPM版本5.2.0默认安装)
本来是通过客户端完成渲染,现在统一到服务端node服务去做。尤其是高并发访问的情况,会大量占用服务端CPU资源;
在服务端渲染中,只会执行到componentDidMount之前的生命周期钩子,因此项目引用的第三方的库也不可用其它生命周期钩子,这对引用库的选择产生了很大的限制;
除了对webpack、React要熟悉,还需要掌握node、Koa2等相关技术。相对于客户端渲染,项目构建、部署过程更加复杂。
实现原理
服务端渲染是先向后端服务器请求数据,然后生成完整首屏html返回给浏览器;而客户端渲染是等js代码下载、加载、解析完成后再请求数据渲染,等待的过程页面是什么都没有的,就是用户看到的白屏。就是服务端渲染不需要等待js代码下载完成并请求数据,就可以返回一个已有完整数据的首屏页面。
初始化项目
- $ npx create-nuxt-app <项目名> (Nuxt.js团队创建了脚手架工具 create-nuxt-app)
- $ npm run dev (http://localhost:3000)
配置ip地址端口号
若端口号冲突,或想运行在本机ip,在package.json中添加config配置
{"config":{"nuxt":{"host":"127.0.0.1","port":"1818" }}
}
重启项目即可
路由
根据目录结构自动生层router.js
标签跳转
<nuxt-link to="/">跳转首页</nuxt-link>
<nuxt-link :to="{name: 'news',query:{id:'1'}}">跳转新闻页</nuxt-link>
- params 传值(id会显示地址栏,其他参数不会显示在地址栏)
this.$router.push({ name: 'log-id',params:{id:12,key:value})
//接受
async asyncData ({ params }) { // params.id 就是我们传进来的值
}
// 或者
created () { this.$route.params.xxx
}
- query传值(所有的参数都会显示在地址栏)
this.$router.push({ name: 'log-id',query:{id:12,key:value})
//接收
async asyncData ({app,query }) { // pquery.id 就是我们传进来的值
}
// 或者
created () { this.$route.query.xxx
}
动态路由
//目录结构:goods文件夹下面动态路由_id文件
--| goods/
-----| _id.vue
-----| index.vue
//index.vue传参
<nuxt-link :to="{name: 'goods-id', params:{id: 1}}">苹果详情</nuxt-link>
<nuxt-link :to=" '/goods/2' ">橘子详情</nuxt-link>
//_id.vue接受参数,并校验参数,若参数不合格,将会跳转到404页面
<script>export default {validate({params}){ //params相当于url中的pathname , 而query是路由携带的参数?type=1return \^\d+$\.test(params.id)}}
</script>
嵌套路由
//路由结构:如下users.vue是父路由,其子路由需要放在与他同名的文件夹下users/pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue
父组件(.vue文件) 内增加 用于显示子视图内容
路由切换添加过渡动画
全局动画
- 在assets文件下新建全局样式文件
- 在 nuxt.config.js 中配置全局common.css
module.exports = {css: [ '@assets/common.css' ]
}
//common.css
.page-enter-active, .page-leave-active {transition: opacity .5s;
}
.page-enter, .page-leave-active {opacity: 0;
}
单个页面动画
- 在全局样式里定义单独的过渡样式,然后在所需组件内transition 属性的值设置为 news
//common.css
.news-enter-active, .news-leave-active {transition: all .5s;color:red;
}
.news-enter, .news-leave-active {opacity: 0;color:blue;
}
//news.vue
export default {transition: 'news'
}
默认模板和默认布局(优选)
默认模板
- 在根目录下新建一个app.html 文件
<!DOCTYPE html>
<html {{ HTML_ATTRS }}><head {{ HEAD_ATTRS }}>{{ HEAD }} //nuxt.config.js中配置的head</head><body {{ BODY_ATTRS }}>//可以在这写一段固定的代码,这样机会在每个页面都显示,例如:<h1>欢迎光临</h1>{{ APP }} //pages中的页面</body>
</html>
默认布局
- 可通过添加根目录下 layouts/default.vue 文件来扩展应用的默认布局
<template>//在默认布局中可以定义pc网站的头部和底部,这样就会在每个页面中显示<nuxt/>
</template>
自定义布局
- 在根目录的layouts文件夹下可以定义特殊的布局,例如某个页面需要特殊的头部
// layouts/blog.vue
<template><div><div>我的博客导航栏在这里</div><nuxt/></div>
</template>
- 在所需要的页面中引入自定义的布局
<template>
<!-- Your template -->
</template>
<script>
export default {layout: 'blog'// page component definitions
}
</script>
自定义错误页面
- 在layouts文件夹爱下创建 error.vue 文件 layouts/error.vue ,当404 或 500 的时候跳转
<template><div class="container"><h1 v-if="error.statusCode === 404">页面不存在</h1><h1 v-else>应用发生错误异常</h1><nuxt-link to="/">首 页</nuxt-link></div>
</template><script>
export default {props: ['error'], //nuxt自己传递的error对象(包含statusCode)layout: 'blog' // 你可以为错误页面指定自定义的布局
}
</script>
基本页面
- asyncData
- 在渲染组件之前异步获取数据,即在服务端获取数据并生成页面
- 如果在mounted中掉接口,则是在组件渲染之后获取到数据,然后通过js渲染在客户端
- 返回一个数据对象给当前组件,可以直接使用,无需再data中定义
- 由于asyncData方法是在组件 初始化 前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象
- 同步调用 async/await
- axios返回的是promise对象,是异步调用
- async/await是同步调用,在数据返回成功之后,才会执行后边的操作
<template><h1 class="red">Hello {{ name }}!</h1>
</template><script>
export default {data(){return {title:this.$route.params.title}},props:['name'],async asyncData (context) {// 每次组件加载之前调用,可以在这里调接口,设置组件的数据const { data } = await axios.get('')return { initdata:data } //initdata可以像data重数据一样直接使用},async fetch ({ store, params }) {// 在渲染页面前填充应用的状态树(store)数据, 与 asyncData 方法类似,不同的是它不会设置组件的数据。let { data } = await axios.get('http://my-api/stars')store.commit('setStars', data)}head () {// 每个页面单独设置meta,title和contenttitle:this.title,meta:{content:'描述',name:'',hid:'' //唯一标识,跟原来的一样可以覆盖原来的meta}},// and more functionality to discover...
}
</script><style>
.red {color: red;
}
</style>
nuxt.js面试篇相关推荐
- 【面试篇】寒冬求职季之你必须要懂的原生JS(中)
互联网寒冬之际,各大公司都缩减了HC,甚至是采取了"裁员"措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就 ...
- Nuxt.js - nuxt-link与router-link的差异
前言 在使用Nuxt.js时可能会遇到一个这样的问题? 当打开请求页面的时候,所有页面都被请求了. 这正是<router-link>组件所有的特性. 首先说一下router-link ro ...
- web前端开发分享js进阶篇
js进阶篇: js进阶,等妙味看的差不多,心里难免痒痒,看老师用尽可能少的代码来实现了众多以前没法实现的动态效果.然后自己想写,但不知道写啥东西,下面就这个问题做以建议,写这些东西的目的有这么几个,一 ...
- imchat视频聊天室 linux,基于Nuxt+Vant聊天模板|nuxt.js仿微信界面|红包|朋友圈
项目说明 > [NuxtIMChat项目]是基于vue.js+nuxt.js+vuex+webpack+vant-ui开发的仿微信聊天实例.实现了消息发送.图片/视频预览.下拉刷新/长按弹窗.朋 ...
- ⑪(面试篇 2/3)、《史上最全iOS八股文面试题》2022年,金三银四我为你准备了,iOS《1000条》笔试题以及面试题(包含答案)。带面试你过关斩将,(赶紧过来背iOS八股文)
iOS面试题 一共分为笔试题和面试题两部分 笔试题 一共分为10个 总共613题 面试题 一共400题 笔试题 一个10个系列 分别为 ①(语法篇) 共147题 已更新 ②(常识篇) 共72题 已更新 ...
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
- 计算机网络 - 面试篇
计算机网络 - 面试篇 综合 OSI七层模型 讲一下网络五层模型,每一层的职责? 在浏览器地址栏输入一个URL后回车,执行的全部过程 tcp.udp.http.https等常用协议 Cookie 和 ...
- 【面试篇】前端点滴(css/css3)
[面试篇]前端点滴(CSS/CSS3)---倾尽所有 面试小问答 css基础 css盒模型 css选择器 BFC css(float) css(position/z-index) css(displa ...
- Nuxt.js开启SSR渲染的教程详解
第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多 ...
最新文章
- PHP isset 函数作用
- CentOS5 部署 戴尔OMSA
- 电信业务分类目录2019_2019年1月国内增值电信业务许可情况分析报告,市场区域发展不均衡...
- 成功使用Windows Live Writer 2010发布日志
- 用Vue搭建一个应用盒子(二):datetime-picker
- 面试加分项!程序员工作2年月薪12K,附架构师必备技术详解
- 如何计算一年总共有多少周_一年有几个周?怎么计算周数及闰年?
- 最大的路径的节点值之和
- docker本地构建kerberos单机环境
- linux通配符与正则表达式
- oracle中间人投毒漏洞,‘TNS Listener’远程数据投毒漏洞
- ipad分屏功能怎么开启_iPad 重大更新!14个新功能,每个都很实用
- Java高并发之魂:synchronized深度解析
- 【原创】AE菜单中英文对照完全版(贴图打包下载)
- 网络io和磁盘io_在磁盘IO上,第1部分:IO的风味
- Think in java(四)枚举类enum的基本特性、构造方法与方法覆盖、Switch语句中的enum运用
- 一、fopen与fclose
- 378. 骑士放置——最大独立集+匈牙利算法
- 世界主要的大半岛有哪些?
- 软件园里的流氓(11)