Vue服务器渲染Nuxt学习笔记


Posted in Javascript onJanuary 31, 2018

关于SSR的文章网上很多,一开始看得我云里雾里。然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清晰明了的很少。所以想写篇文章学习下SSR,希望能够帮助大家快速理解Vue SSR。

什么是SSR?

SSR,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文件,将html页面传给浏览器。 优点:

  1. SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js,SSR生成的HTML是有内容的,这让搜索引擎能够索引到页面内容。
  2. 更快内容到达时间 传统的SPA应用是将bundle.js从服务器获取,然后在客户端解析并挂载到dom。而SSR直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。

可以从下面两张图来看,第一张图是SSR生成的HTML页面,第二种是传统SPA生成的HTML页面。

Vue服务器渲染Nuxt学习笔记

SSR

Vue服务器渲染Nuxt学习笔记

SPA

Nuxt.js

我看了官方 SSR 的介绍,也看了 Nuxt.js 的文档。本质上来说 SSR 是node后端的操作行为,作为只想好好写前端代码的我,不想太折腾。而 Nuxt.js 非常完美地整合了 SSR 的功能。让我们可以开箱即用~官方也推荐使用 Nuxt.js 来搭建 SSR 项目。

好处

我觉得 Nuxt.js 相比自己写 SSR 有几点好处。

  1. 无需配置Webpack:我一开始还在找Webpack配置呢,看了文档知道nuxt都帮我们封装好了。如需修改Webpack配置只需修改nuxt.config.js 文件。
  2. 无需node知识:只要你会写vue前端,你就可以写出SSR。无需知道SSR和node、express的配置方法(不过现在的前端多少都会点node知识~)。
  3. 整合了vue全家桶,直接可用。方便程度不亚于 vue-cli:安装Nuxt——写组件——编译并启动服务———看效果。就这么简单。
  4. 配置简单,文档友好:认真看下 Nuxt.js 文档就会发现涵盖的内容并不多,而功能很全,非常适合入手。

安装

安装方法在此。很简单,生成模板,然后npm安装依赖,最后再运行。

简单搬运下步骤吧。

// vue-cli 创建nuxt模板项目
$ vue init nuxt-community/starter-template <project-name>
// 安装依赖项
$ cd <project-name>
$ npm install
// 编译并启动服务
$ npm run dev
// 打开 http://localhost:3000

安装遇到的问题:

由于 Nuxt.js 中使用了 async...await 语法,而低版本的 node 不支持这个语法,所以必须升级 node 到 7.0 版本之上~

然后建议不要使用cnpm,我用cnpm安装运行老报错,感觉有坑。

目录结构

Nuxt.js 花了很大的篇幅讲它的目录结构,其实了解了目录结构就了解了 Nuxt.js 的大概。Nuxt.js 帮我们配置好了所有东西,我们只需要按照它的要求在相应目录下创建文件写代码即可。

  1. assets 需要编译的资源文件,如 JavaScript、SASS、LESS 等。
  2. static 不需要编译的静态资源文件,如图片资源。
  3. components 顾名思义,存放 *.vue 组件的地方。常规 vue 组件写法。
  4. layouts 布局目录,设置布局的地方,其中 <nuxt/> 标签是我们写的页面内容。可用作添加导航栏、底部栏等截面。
  5. middleware 中间件目录,所谓中间件,就是在页面与页面跳转中执行的函数方法。如页面跳转时验证用户信息操作。
  6. pages 页面目录。重点来了~这就是我们存放展示页面的地方。该目录下的文件会转换成相应的路由路径供浏览器访问。另外呢,该目录下的 *.vue 页面文件中 Nuxt.js 提供了一些特殊的方法用于处理服务器渲染中的事件。具体关于路由和特殊方法列举在下面了。
    1. pages 路由
    2. 页面组件的简单介绍,具体特殊配置项的用法请查阅API。
  7. plugins 插件目录,像 mint-ui 这种第三方插件就放在这里啦~具体用法看这里。
  8. store vuex 状态管理器目录,如果该目录是空的, Nuxt.js 将不启用 vuex。当我们在该文件夹下创建 index.js 文件后即可使用 vuex 状态管理器。用法在此!
  9. nuxt.config.js 该文件是 Nuxt.js 的唯一配置项,之前提过 Nuxt.js 将 Webpack 等一众配置都封装好了,所以如果需要特殊配置,只需要修改该文件来覆盖默认配置即可。具体配置参数请查阅API。
  10. package.json 不解释……

Demo演示

好消息,VueStudyDemos又更新啦!欢迎Star~本文Demo已收入到VueStudyDemos中。

下面我们来简单实现下各文件夹所提到的功能。

资源加载

我在 assets 文件夹下添加了 font-awesome 字体库,在 static 文件夹中放了张 Vue 的 logo 图片。然后对资源进行调用。

<i class="fa fa-address-book" aria-hidden="true"></i>
<img src="~/static/logo.png" />

这里需要将 font-awesome 的 css 变为全局 css,避免每个用到的页面中都 import 字体库的css。所以我们在 nuxt.config.js 中添加如下配置。

module.exports = {
 ...
 css: [
  '~/assets/font-awesome/css/font-awesome.min.css'
 ],
 ...
}

组件定义

组件存放在 components 文件夹下,这个我们讲目录的时候提到过。组件的用法和常用 vue 组件用法一致。 定义组件 Avatar,然后在 Page 页面中使用。

<template>
 <avatar/>
</template>
<script>
import avatar from '~/components/Avatar'
export default {
  ...
  components: {
    avatar
  }
};
</script>

布局

在 layouts 目录中,default 是默认布局。我们可以修改默认布局也可以新建布局来使用。

在布局文件中 </nuxt> 标签是我们要服务器渲染的区域。

下面我们来创建个布局玩玩。

// layouts/page.vue
<template>
<div>
  <mt-header fixed title="标题2"></mt-header>
  <nuxt/>
</div>
</template>

然后我们来使用布局,在 pages 页面中配置 layout 选项(如果不配置默认就是 default)。

export default {
  ...
  layout: 'page' // 默认是 'default'
};

中间件

所谓中间件,就是在两个页面跳转之间执行的行为。比如我定义一个中间件 add.js

export default function ({ store }) {
  store.commit('increment')
}

然后在 nuxt.config.js 中进行配置:

module.exports = {
 ...
 router: {
  middleware: 'add'
 },
 ...
}

这样,在每次页面跳转的时候都会执行一次中间件方法了。当然,也可以单独定义某个页面的中间件,具体看官网啦~

页面

页面,就是在pages目录下的 *.vue 文件,Nuxt.js 将目录结构配置为 vue-router 路由系统,所以我们可以直接通过文件名来访问到相应页面(先不提特殊路由)。

比如 pages/app.vue 文件就可以通过 http://localhost:3000/app 来进行访问。

注意:页面组件写法与常用 Vue 组件写法相同,但 Nuxt.js 还提供了一些特殊配置项来配置服务器渲染过程中的行为。具体有啥配置请看 页面文档。

路由

路由就是使 pages 目录能够直接访问的原因。Nuxt.js 非常巧妙地使用目录结构和文件名称将 vue-router 的各种用法都涵盖进去了。如动态路由、嵌套路由等。具体可参考文档。也可以看看demo的 pages 目录。

插件

对于前端项目,插件的使用当然是必不可少的。官网上对这方面讲的很清楚。我贴一下 demo 中的用法。这里用的是 mint-ui 库。

// plugins/mint-ui.js
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
// nuxt.config.js
module.exports = {
 build: {
  vendor: ['mint-ui']
 },
 plugins: [
  '~plugins/mint-ui'
 ]
}

这样就可以使用第三方库 mint-ui 啦!

<template>
 <div>
  <mt-navbar v-model="selected">
    <mt-tab-item id="1">选项一</mt-tab-item>
    <mt-tab-item id="2">选项二</mt-tab-item>
    <mt-tab-item id="3">选项三</mt-tab-item>
  </mt-navbar>

  <!-- tab-container -->
  <mt-tab-container v-model="selected">
    <mt-tab-container-item id="1">
      <mt-cell v-for="n in 10" :key="n" :title="'内容 ' + n" />
    </mt-tab-container-item>
    <mt-tab-container-item id="2">
      <mt-cell v-for="n in 4" :key="n" :title="'测试 ' + n" />
    </mt-tab-container-item>
    <mt-tab-container-item id="3">
      <mt-cell v-for="n in 6" :key="n" :title="'选项 ' + n" />
    </mt-tab-container-item>
  </mt-tab-container>
 </div>
</template>

vuex

对于 vuex,用法有两种:普通方式和模块方式,用法和我们常用的 vuex 一样。我的demo中是直接复制官网的代码。

需要注意的是,vuex 的数据会存在context对象中,我们可以通过context对象获取状态数据。

发布

发布有两种方式服务器应用渲染部署和静态部署,发布方式看这里

最后

去看 Nuxt.js 的 API,会发现 Nuxt.js 真的是高度封装。对于 Nuxt.js 生成的模板项目,只有一些必要配置是需要我们去完成的。Nuxt.js 可以说是一个非常友好而强大的 SSR 框架了。

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

Javascript 相关文章推荐
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 Javascript
微信小程序页面生命周期详解
Jan 31 #Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 #Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 #Javascript
微信小程序App生命周期详解
Jan 31 #Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 #jQuery
微信小程序switch组件使用详解
Jan 31 #Javascript
vue项目中导入swiper插件的方法
Jan 30 #Javascript
You might like
php5 mysql分页实例代码
2008/04/10 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
javascript学习网址备忘
2007/05/29 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
JavaScript 动态创建VML的方法
2009/10/14 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python单链表的简单实现方法
2014/09/23 Python
python写入中英文字符串到文件的方法
2015/05/06 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
政府会议通知范文
2015/04/15 职场文书