Nuxt.js 遇到的问题

4月前

Nuxt.js 主要是 Vuejs SSR 后端渲染一个开箱就可以食用的实现,想要有更高的自由度可以去参考:Vue.js 服务器端渲染指南。如果仅仅只是为了解决 SEO 的问题,贸然采用 Vuejs SSR 显然不是一个好的选择。

CSS 模块化

Nuxtjs 在任意 .vue 文件中引入 CSS 文件,即便是在不同的 layout 中引入,都会变成全局样式,个人的解决方法有两种:

1. 加入顶部 class

.app {
    header {
        height: 100px;
    }
}

.admin {
    header {
        background: #eee
    }
}

2. CSS Module

开启 CSS Module 只需要在 nuxt.config.js 加入:

cssModules: {
  modules: true
}

UI 库

引入 UI 库,只能在 nuxt.config.js 中的 plugins 字段中加入,并且还需注意第三方库是否支持 SSR。以 Element-UI 为例:

首先需要在 plugins 文件夹下添加文件 element-ui.js

import Vue from 'vue'
import ElementUI from 'element-ui'

Vue.use(ElementUI)

然后在 nuxt.config.js 中添加设置,是否开启 SSR 取决于第三方库。

plugins: [
  { 
    src: '~/plugins/element-ui', 
    ssr: true 
  }
]

Nuxt 数据拉取

数据拉取可以使用 asyncDatafetch,两者差别在于 asyncData 可以更新 datafetch 无法更新 datafetch 最好是和全局状态一起使用。

全局状态管理

Nuxt 已经集成了 Vuex,在 store 文件夹中添加相应的文件就可以使用。如果需要预加载数据,只能在 store/index.js 中通过 nuxtServerInit 来实现,其他 store 文件里面调用 nuxtServerInit 是无效的。nuxtServerInit 执行时间比 middleware 要早,如果想预加载数据或者用户权限判断,最好是在 nuxtServerInit 处理完相应的数据。

export const actions = {
  async nuxtServerInit ({ dispatch }) {
  }
}

新页面滚动条

新页面切换时,如 /page?page=1 这样的页面,由于共用了相同的 vue 文件,跳转新页面时候,滚动条会保持在相同的位置,解决方式是修改 layouts 中 nuxt 组件的 key。

/* /layouts/default.vue */

<template>
  <div id="app">
    <nuxt :key="$route.fullPath" />
  </div>
</template>

评论(11)

  • 如果在移动端中页面跳转回不到顶部怎么解决

    20天前 回复
    • 可以使用 https://zh.nuxtjs.org/api/pages-scrolltotop/ 这个属性来滚动到顶部

      19天前 回复
    • pc端会默认跳到目标页面会有滚动的效果,怎么去掉呢

      11天前 回复
  • 文章不错支持一下,非常喜欢

    2月前 回复
  • 文章不错支持一下吧

    2月前 回复
  • 好简洁的博客主题,速度杠杠滴

    3月前 回复
  • 虽然这方面还没接触,但深有体会

    3月前 回复
  • hello friend i need a iphoto wp theme i tried to find on google but i did not find :(( can you share me this theme please? thank you so much...

    3月前 回复
    • you can get the iPhoto theme here: https://www.dropbox.com/s/ppiyawpfveahwb5/iPhoto-MUFENG-master.zip?dl=0

      3月前 回复
  • 写的很好,支持一下

    3月前 回复
  • 这主题好看,非常简约

    3月前 回复