记使用nuxt.js开发服务端渲染的心路过程

220 阅读3分钟

Nuxt.js

1.简介

Nuxt.js是一个基于Vue.js的通用应用框架,同时支持服务端和客户端。Nuxt.js集成了Vue2,Vue-Router,Vuex,Vue-Meta组件,用来开发完整而强大的web应用。
Nuxt.js支持服务端渲染(ssr),单页面应用程序(spa),静态化(预渲染)三种模式。

2.特性


image.png

3.运行流程图

下面这张图阐述了Nuxt.js从一个完整服务器到渲染的过程(切换路由渲染页面的过程)
image.png

安装

1.使用官方脚手架 create-nuxt-app

npx create-nuxt-app <项目名>

执行完之后会让你进行一些选择
image.png
image.png

2.从头开始创建项目

具体不介绍了去看官方文档路径☞ 官网

目录

项目创建完毕之后会有下图的目录结构(除了选中的是自己添加的外),下面一个个介绍这些目录
image.png

1.资源目录(assets)

和Vue项目一样用来放置一些未编译的静态资源如 LESSSASS 或 JavaScript

2.组件目录(components)

组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件,即这些组件不会像页面组件那样有 asyncData 方法的特性。

3.布局目录(layouts)

布局目录 layouts 用于放置应用的布局组件。

4.中间件目录(middleware)

用来放置项目的中间件目录(暂时没有用到)

5.页面目录(pages)

通过pages目录来创建应用路由。Nuxt.js会读取pages下面所有带.vue文件并自动生成对应的路由配置,并不需要自己手动添加路由

6.插件目录(plugins)

用来放置那些在Vue实例化之前用到的插件。

7.静态资源目录(static)

和vue项目一样用来存放一下静态资源文件

8.nuxt.config.js文件

设置应用的个性化设置

路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。在页面之间使用标签

1.基础路由

<nuxt-link to="user">个人中心</nuxt-link>

如果pages目录如下图:

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

那么Nuxt.js生成的路由配置如下:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

2.动态路由

在Nuxt.js中需要创建动态路由需要创建以下划线为前缀的文件或目录
目录结构

pages/
--| user/
-----| _id.vue
--| index.vue

渲染的路由:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user-id',
      path: '/user/:id?',
      component: 'pages/user/_id.vue'
    },
  ]
}

插件

在Vue的组件生命周期之中,只有beforeCreate和created方法会在客户端和服务端被调用,其他生命周期只在客户端运行。
      假如想使用element-ui首先创建plugins/element-ui.js

import Vue from 'vue'
import Element from 'element-ui'
// import locale from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(Element, { locale })

然后在nuxt.config.js 内配置 plugins 如下:

 plugins: [
 	{src:'@/plugins/element-ui',ssr:false,},
 ]

常见问题

全局css

项目中会设置一些全局css 我们可以在nuxt.config.js内配置css如下:

css: [
	'@/static/css/base.css',
]

引用外部资源

1.全局配置

nuxt.config.js内配置

module.exports = {
	head: {
  	script:[
    	{
        src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
      }
    ],
    link: [
    	{
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Roboto'
      }
    ]
  }
}

2.局部配置

可以在pages内的.vue文件进行配置

<template>
  <h1>使用 jQuery 和 Roboto 字体的关于页</h1>
</template>

<script>
  export default {
    head: {
      script: [
        {
          src:
            'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
        }
      ],
      link: [
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css?family=Roboto'
        }
      ]
    }
  }

Window 或 Document 对象未定义

因为在服务端没有winddow和document,然后一些插件又用到了它,这些只能用于客户端的插件只能通过process.client 变量来判断导入。

if(process.client) {
	require('external_library')
}

本文参考☞Nuxt.js 只记录作者遇到的一些问题。