nuxt.js实现了一个新的概念，layout布局，我们可以通过layout布 局方便的实现页面的多个布局之间方便的切换。具体开发的页面中，如果使用默认布局，则不需指定页面的布局，nuxt框架会自动对没有指定布局的页面和default布局进行关联。如果需要指定布局，则在layout字段中对布局进行指定。
<script> export default { layout: 'plusBuy', ... } </script> // 如果layout文件中建立了一个单独的文件，则在使用中也要指定 <script> export default { layout: 'plusBuy/plusBuy', ... } </script>
四、nuxt爬坑
1、localhost访问可以，换成真实的ip地址后访问不了
解决方案：
确认有没有开代理
在package.json里做如下配置
"config": { "nuxt": { "host": "0.0.0.0", "port": 3000 } }
2、接口跨域问题
解决方案
安装@nuxtjs/axios、@nuxtjs/proxy
在nuxt.config.js做如下配置
modules: ['@nuxtjs/axios'], // 不需要加入@nuxtjs/proxy axios: { proxy: true }, proxy: { '/wlfrontend': { // 请求到 /wlfrontend 代理到请求 :7001/wlfrontend target: 'http://10.102.140.38:7001', changeOrigin: true // 如果接口跨域，需要进行这个参数配置 }, '/scenery': { // 将'localhost:8080/scenery/xxx'代理到'https://m.ly.com/scenery/xxx' target: 'https://m.ly.com', // 代理地址 changeOrigin: true, // 如果接口跨域，需要进行这个参数配置 secure: false // 默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器。如果你想要接受，只要设置 secure: false } }
3、asyncDate fetch created 因为服务端客户端都会走，如果不想在客户端执行？
async asyncData ({ query, store, req }) { if (!process.server) return } async fetch({ store, params }){ if (!process.server) return } created(){ if (!process.server) return },
4、页面做缓存，也就是返回上一级保持数据不重新请求
解决方案:
在布局页面处理，layout/default.vue或者是自己建立的布局页面
<template> <div> <nuxt keep-alive /> </div> </template>
5、nuxt是把所有页面的js都引入到主页了？
在生产模式下，Nuxt.js 使用浏览器的预加载策略来预加载目标页面的脚本资源。所以当用户点击某个链接时，会有一种秒开的感觉。预加载策略使得 Nuxt.js 既可以保持代码分离又能保证页面访问体验。<nuxt-link>则是帮我们扩展了自动预获取代码分割页面。可以使用 no-prefetch属性 禁用
如果想要禁用，在nuxt.config.js做如下配置
router: { prefetchLinks: false, // 全局禁用所有链接上的预取 } render: { resourceHints: false, // 添加prefetch和preload，以加快初始化页面加载时间。如果有许多页面和路由，可禁用此项 },
6、切换子路由的head中外部引入脚本载入有延迟，所以在调用时报错
注意：
1、引入脚本不要加async:true，这样的话脚本不会阻塞，在下面代码有用到该脚本中的方式时，脚本可能还没有加载完
2、需要每个小项目自己做个定制化页面layout，layout/我的目录/我的页面.vue 然后在定制化页面中使用head()加入脚本
export default { // 方式一： head: { script: [ { type: 'text/javascript', src: 'https://js.40017.cn/cn/min/??/touch/hb/c/bridge.2.1.4.js?v=2016053', defer: true } ] } // 方式二： head () { return { script: [ { type: 'text/javascript', src: 'https://js.40017.cn/cn/min/??/touch/hb/c/bridge.2.1.4.js?v=2016053', defer: true } ] } } }
7、滚动事件
如果html和body设置了100%，那么子页面足够长时滚动的话，滚动事件要绑定在子页面上，因为body的高度不是整个页面的高度
// 1. 在子页面父元素加 <template> <div ref="mainPage"></div> </template> // 2. 样式设置100%滚动 .plus { height: 100%; overflow-y: scroll; -webkit-overflow-scrolling : touch; } // 3. 再添加滚动事件 function scrollEvent() { var that = this; let dom = this.$refs.mainPage; dom.onscroll = function() { let wh = dom.scrollTop; // 页面上滑，出现 wh > 100 ? (that.showBackTop = true) : (that.showBackTop = false); // 未开通，页面滑动至不出现顶部的立即开通按钮时，底部的立即开通固定展示 if(that.memberRightsInfo && !that.memberRightsInfo.IsPlusMember){ if(document.querySelector('.tab') && document.querySelector('.tab').offsetTop){ let distance = document.querySelector('.tab').offsetTop; wh > distance - 50 ? (that.isShowFixedBtn = true) : (that.isShowFixedBtn = false); } } }; }
8、文件下建立了其他文件，比如store/plusBuy/index.js，并没有在store下直接建立index.js，如何使用？