详解Vue基于 Nuxt.js 实现服务端渲染(SSR)


Posted in Javascript onApril 05, 2018

直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染

2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js

几小时后,一个基于 Vue.js 的服务端渲染应用框架应运而生,与 Next.js 异曲同工,这就是Nuxt.js

一、快速模板

在已经安装了 vue-cli 的前提下,可以快速创建一个 nuxt 的项目模板

vue init nuxt-community/starter-template MyProject

其中 MyProject 是项目文件夹名称,可自定义

通过 npm install (似乎用 yarn install 更顺利) 安装依赖之后,可以直接 npm run dev 在 开发环境 启动项目

默认启动的地址为 http://localhost:3000/,可以在 package.json 中添加以下配置来修改主机端口号

"config": {
  "nuxt": {
   "host": "0.0.0.0",
   "port": "7788"
  }
 },

开发完成后执行 npm run build 打包代码,最后 npm start 启动服务

二、重要目录

生成的 项目目录 如下

详解Vue基于 Nuxt.js 实现服务端渲染(SSR)

大部分文件夹名称 都是 nuxt 默认保留的,不可修改

其中比价比较关键的目录有三个:

1. components 组件目录

详解Vue基于 Nuxt.js 实现服务端渲染(SSR)

一般用来存放 非页面级别 的组件,如 header、footer 等公共组件

该目录下的组件具有常规 vue 组件的方法和特性,不会被 nuxt.js 扩展特性

2. layouts 布局目录

详解Vue基于 Nuxt.js 实现服务端渲染(SSR)

可以修改该目录下的 default.vue 来修改默认布局

<template>
 <div>
  <my-header></my-header>
  <nuxt/>
  <my-footer></my-footer>
 </div>
</template>

其中 <nuxt/> 是必需的,页面的主体内容会显示在这里 (类似于根节点的 <router-view/>)

此外还可以在目录下新增 error.vue 作为错误页面,具体的写法可以参考官方文档

3. pages 页面目录

详解Vue基于 Nuxt.js 实现服务端渲染(SSR)

用于存放页面级别的组件,nuxt 会根据该目录下的页面结构生成路由

比如上图中的页面结构,会生成这样的路由配置:

router: {
 routes: [
  {
   name: 'index',
   path: '/',
   component: 'pages/index.vue'
  },
  {
   name: 'about',
   path: '/about',
   component: 'pages/about.vue'
  },
  {
   name: 'classroom',
   path: '/classroom',
   component: 'pages/classroom.vue',
   children: [
    {
     path: 'student',
     component: 'pages/classroom/student.vue',
     name: 'student'
    },
    { //定义带参数的动态路由,需要创建对应的以下划线作为前缀的 Vue 文件或目录
     path: ':id',
     component: 'pages/classroom/_id.vue',
     name: 'classroom-id'
    }
   ]
  }
 ]
}

此外,该目录下的 vue 组件还具备一些 Nuxt.js 提供的特殊功能特性

其中 asyncData 方法比较常用,支持异步数据处理

这个方法会在 页面组件 每次加载之前被调用,然后获取数据并返回给当前组件

asyncData ({ params, error }) {
  return axios.get(`api/posts/${params.id}`)
  .then((res) => {
   return { name: res.data.name}
  })
  .catch((e) => {
   error({ statusCode: 404, message: 'not found' })
  })
 }

asyncData 方法的第一个参数为上下文对象 context,具体属性可以 查看这里

由于asyncData方法是在组件初始化前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象

三、使用插件

如果项目中还需要引入其他的第三方插件,可以直接在页面中引入,这样在打包的时候,会将插件打包到页面对应的 js 里面

但要是别的页面也引入了同样的插件,就会重复打包。如果没有需要分页打包的需求,这时候可以配置 plugins

以 element-ui 为例,在安装了 element-ui 之后,在 plugins 目录下创建 elementUI.js

详解Vue基于 Nuxt.js 实现服务端渲染(SSR)

然后在根目录的 nuxt.config.js 中添加配置项 build.vendor 和 plugins

build: {
  vendor: ['~/plugins/elementUI.js']
 },
 plugins: [
  {src: '~/plugins/elementUI.js'},
 ]

这里的 plugins 属性用来配置 vue.js 插件,也就是 可以用 Vue.user() 方法 的插件

默认只需要 src 属性,另外还可以配置 ssr: false,让该文件只在客户端被打包引入

如果是像 axios 这种第三方 (不能 use) 插件,只需要在 plugins 目录下创建 axios.js

// axios.js

import Vue from 'vue'
import axios from 'axios'

const service = axios.create({
 baseURL: '/api'
})

Vue.prototype.$ajax = axios
export default service

然后在 build.vendor  中添加配置 (不需要配置 plugins)

build: {
 vendor: ['~/plugins/axios.js']
}

这样在打包的时候,就会把 axios 打包到 vendor.js 中

四、Vuex 状态树

如果在 store 目录下创建了 index.js,nuxt.js 会根据该目录下的文件创建 Vuex 状态树

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import Axios from '~/plugins/axios.js';

Vue.use(Vuex)

const store = () => new Vuex.Store({
 state: {
  author: 'WiseWrong',
  info: ''
 },
 mutations: {
  setInfo (state, val) {
   state.info = val
  }
 },
 actions: {
  loadAboutMeInfo ({commit, state}) {
   return Axios.get(`/about`)
    .then(res => {
     console.log('ajax is success')
     console.log(res.data.info)
     commit('setInfo', res.data.info)
    })
    .catch(err => {
     console.log('error')
    })
  }
 }
})

export default store

Nuxt.js 内置引用了 vuex 模块,不需要额外安装

上面的代码中,我在 actions 中写了一个 loadAboutMeInfo() 方法,用来请求 /api/about 接口

然后在 about.vue 页面中调用

// about.vue 

<template>
 <section class="container">
  <div>
   <img src="~/assets/about.png" alt="">
  </div>
  <h1>{{$store.state.info}}</h1>
 </section>
</template>

<script>
export default {
 fetch({ store }) {
  return store.dispatch('loadAboutMeInfo')
 },
 name: 'about',
 data () {
  return {}
 }
}
</script>

成果演示:

详解Vue基于 Nuxt.js 实现服务端渲染(SSR) 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
表单元素事件 (Form Element Events)
Jul 17 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
详解Vue.js 响应接口
Jul 04 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 Javascript
express默认日志组件morgan的方法
Apr 05 #Javascript
React Native悬浮按钮组件的示例代码
Apr 05 #Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 #Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 #Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 #Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 #Javascript
vue中mint-ui的使用方法
Apr 04 #Javascript
You might like
PHP实现多条件查询实例代码
2010/07/17 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
python实现图片处理和特征提取详解
2017/11/13 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
Python global全局变量函数详解
2018/09/18 Python
python实现键盘输入的实操方法
2019/07/16 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
大学自我鉴定
2013/12/20 职场文书
八年级英语教学反思
2014/01/09 职场文书
应用化学专业职业生涯规划书
2014/01/22 职场文书
三年级评语大全
2014/04/23 职场文书
应届大专生自荐书
2014/06/16 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
2015年度保密工作总结
2015/04/24 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
Python序列化与反序列化相关知识总结
2021/06/08 Python
Python实现打乒乓小游戏
2021/09/25 Python
再谈python_tkinter弹出对话框创建
2022/03/20 Python
Java异常体系非正常停止和分类
2022/06/14 Java/Android