七三、vue ssr nuxt.js 使用简介_ssr js demo-程序员宅基地

技术标签: nuxt.js  nuxt  ssr  vue  vue进阶之路  

1. Nuxt.js服务器端渲染

学习目标

  • 了解Nuxt.js的作用
  • 掌握Nuxt.js中的路由
  • 掌握layouts、pages以及components的区别
  • 能够在Nuxt.js项目中使用element-ui
  • 掌握Nuxt.js中异步获取数据的方式
  • 掌握SEO的优化

1.1 Nuxt.js入门

1.1.1 什么是Nuxt.js

Vue服务端渲染官网

Nuxt.js官网

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

1.1.2 第一个Nuxt应用程序
npm i create-nuxt-app -g
create-nuxt-app my-nuxt-demo
cd my-nuxt-demo
npm run dev
1.1.3 文件结构分析
└─my-nuxt-demo
  ├─.nuxt               // Nuxt自动生成,临时的用于编辑的文件,build
  ├─assets              // 用于组织未编译的静态资源如LESS、SASS或JavaScript,对于不需要通过 Webpack 处理的静态资源文件,可以放置在 static 目录中
  ├─components          // 用于自己编写的Vue组件,比如日历组件、分页组件
  ├─layouts             // 布局目录,用于组织应用的布局组件,不可更改
  ├─middleware          // 用于存放中间件
  ├─node_modules
  ├─pages               // 用于组织应用的路由及视图,Nuxt.js根据该目录结构自动生成对应的路由配置,文件名不可更改
  ├─plugins             // 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
  ├─static              // 用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候,该目录下的文件会映射至应用的根路径 / 下。文件夹名不可更改。
  └─store               // 用于组织应用的Vuex 状态管理。文件夹名不可更改。
  ├─.editorconfig       // 开发工具格式配置
  ├─.eslintrc.js        // ESLint的配置文件,用于检查代码格式
  ├─.gitignore          // 配置git忽略文件
  ├─nuxt.config.js      // 用于组织Nuxt.js 应用的个性化配置,以便覆盖默认配置。文件名不可更改。
  ├─package-lock.json   // npm自动生成,用于帮助package的统一设置的,yarn也有相同的操作
  ├─package.json        // npm 包管理配置文件
  ├─README.md

1.2 页面和路由

1.2.1 基本路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

假设 pages 的目录结构如下

└─pages
    ├─index.vue
    └─user
      ├─index.vue
      ├─one.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'
    }
  ]
}
1.2.2 页面跳转
  1. 不要写成a标签,因为是重新获取一个新的页面,并不是SPA
  2. <nuxt-link to="/users"></nuxt-link>
  3. this.$router.push(’/users’)
1.2.3 动态路由
  • 在 Nuxt.js 里面定义带参数的动态路由,需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。
  • 获取动态参数{ {$route.params.id}}
1.2.4 路由参数校验

Nuxt.js 可以让你在动态路由对应的页面组件中配置一个validate方法用于校验动态路由参数的有效性。该函数有一个布尔类型的返回值,如果返回true则表示校验通过,如果返回false则表示校验未通过。

validate(data) {
    
  cosole.log(data)
  return true
}
1.2.5 嵌套路由
  1. 添加一个Vue文件,作为父组件
  2. 添加一个与父组件同名的文件夹来存放子视图组件
  3. 在父文件中,添加组件,用于展示匹配到的子视图

1.3 layouts & pages & components

1.3.1 创建layout
  1. 去layouts文件夹下面新建一个新的layout组件,例如teachers.vue,并在这个组件中添加组件,这样,所有和teachers相关的页面都会有公共的layout
  2. 给需要用到teachers.vue的组件添加layout属性,并指定需要使用的layout,例如:layout: ‘teachers’
1.3.2 创建特殊layout : error

layouts文件夹下面新建error.vue,error是关键字

1.3.3 新建一个组件

在components文件夹下面新建一个Header.vue组件
引入组件,注意路径的~符号,表示根目录
layout中也能使用组件

1.3.4 样式配置

nuxt.config.js中设置设置全局样式文件路径

1.4 ElementUI使用

  1. 下载npm i element-ui -S

  2. 在plugins文件夹下面,创建ElementUI.js文件

    import Vue from 'vue'
    import ElementUI from 'element-ui'
    Vue.use(ElementUI)
    
  3. 在nuxt.config.js中添加配置

    css: [
      'element-ui/lib/theme-chalk/index.css'
    ],
    plugins: [
      {
          src: '~/plugins/ElementUI', ssr: true }
    ],
    build: {
          
      vendor: ['element-ui']
    }
    

1.5 异步数据

Nuxt.js 扩展了 Vue.js,增加了一个叫 asyncData 的方法,使得我们可以在设置组件的数据之前能异步获取或处理数据。asyncData方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由更新之前被调用。所以需要注意这个函数中不能使用this

注意:常规写法如果在created钩子中写异步,是在客户端渲染的而不是在服务端

使用方法:asyncData(context, callback) {callback(null, data)}

context.route.params.xxx获取参数

callback(new Error(), data)渲染出错的页面

注意:这个方法在服务器端执行和在客户端执行的区别

1.6 axios的使用

安装npm install --save axios

使用

import axios from 'axios'

asyncData(context, callback) {
    
  axios.get('http://localhost:3301/in_theaters')
    .then(res => {
    
      console.log(res);
      callback(null, {
    list: res.data})
    })
}

为防止重复打包,在nuxt.config.js中配置

module.exports = {
    
  build: {
    
    vendor: ['axios']
  }
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zm06201118/article/details/84590163

智能推荐

Fibonacci Heap实现_fibonacciheap consolidate-程序员宅基地

文章浏览阅读740次。本算法是对<算法导论>相关章节伪代码的实现:先贴代码:#include#include#includeusing namespace std;class FibonacciHeap;class node{ friend class FibonacciHeap; node(int v):key(v),height(0),parent(NULL),left(this),righ_fibonacciheap consolidate

CSS选择器_css选择包含某个类名的节点-程序员宅基地

文章浏览阅读629次。1.简单选择器类选择器 使用时 .类名{样式1;样式2;},匹配对应类名元素 id选择器 使用时 #id{样式1;样式2;},匹配对应id的元素 标签选择器 使用时 标签名{样式1;样式2;},匹配对应标签的元素 通用元素选择器 使用时 *{样式1;样式2;},匹配所有元素 2.属性选择器以下标签名以div为例标签名[name] 所有含有name属性的di..._css选择包含某个类名的节点

ubuntu两个conda安装和切换-程序员宅基地

文章浏览阅读1.5k次。1. 下载anaconda2安装,一路默认,注意添加/home/wang/.bashrc选择yes2. 在/home/wang/envs/py3安装anaconda3,其他同anaconda23. conda create --name xxx27 python=2.7 (我的是myPy27),实际上我的包名是2.7.14版本4. conda create --name xxx36 ..._ubuntu 两个版本conda如何指定一个

计算机网络(自顶向下)第七章总结_移动性代理通告扩展中指出该代理是它所在网络的一个外部代理的字段是-程序员宅基地

文章浏览阅读1.4k次,点赞10次,收藏12次。计算机网络第七章:无线网络和移动网络7.1 概述无线网络要素:无线主机。如同在有线网络中一样,主机是运行应用程序的端系统设备。无线链路。主机通过无线通信链路 (wireless communication link) 连接到一个基站或者另一台无线主机。不同的无线链路技术具有不同的传输速率和能够传输不同的距离。基站。基站在有线网络中没有明确的对应设备。它负责向与之关联的无线主机发送数据和从主机那里接收数据。一台无线主机与某基站“相关联”,则是指①该主机位于该基站的无线通信覆盖范围内。②该主机_移动性代理通告扩展中指出该代理是它所在网络的一个外部代理的字段是

Gradle文件操作基础_gradle ziptree-程序员宅基地

文章浏览阅读1w次。一、定位文件:我们可以使用Project.file()方法来定位一个文件获取File对象(详情参考Project的API),如下://相对路径File configFile = file('src/config.xml')//绝对路径File configFile = file(configFile.absolutePath)//项目路径的文件对象 File config_gradle ziptree

张量分解总览_hooi算法-程序员宅基地

文章浏览阅读2k次,点赞3次,收藏14次。一般一维数组,我们称之为向量(vector),二维数组,我们称之为矩阵(matrix);三维数组以及多位数组,我们称之为张量(tensor)。 在介绍张量分解前,我们先看看矩阵分解相关知识概念。一、基本概念矩阵补全(Matrix Completion)目的是为了估计矩阵中缺失的部分(不可观察的部分),可以看做是用矩阵X近似矩阵M,然后用X中的元素作为矩阵M_hooi算法

随便推点

滥用图片博客做 C&C 配置-程序员宅基地

文章浏览阅读60次。0xCC · 2016/02/03 14:500x00 背景几个月前看到有文章介绍俄罗斯的 Hammertoss 恶意软件,使用 Twitter 作为 C&amp;C 服务。以类似方式滥用 TechNet 的也有过报道【1】。脑洞了一下觉得,使用图片(或者其他格式)作为隐写(steganography)的载体来携带 C&amp;C 控制命令更为隐蔽一些,而且携带的信息容量相对 twitter 的 ..._github c&c

springboot2.0集成activiti6.0-程序员宅基地

文章浏览阅读3.7k次,点赞2次,收藏6次。 activiti6.0直接使用starter集成到springboot2.0时,会报异常,无法直接进行集成。所以我才用spring-activiti来集成activiti6.0.整体文件结构如下:1.pom文件依赖&lt;project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.o..._springboot2.0集成activiti6.

国家c语言1级考试题库,国家计算机二级考试 c语言 上机题库100道.docx.docx-程序员宅基地

文章浏览阅读134次。国家计算机二级考试 c语言 上机题库100道.docx1调用fun函数建立班级通讯录,记录学生的编号姓名电话,人数和信息从键盘读入,信息写到myfile5.dat的二进制文件。STYPE FILE fpFun函数先将字符串s中字符按正序存放到t串中,然后把s中字符逆序连到t后. for (i=0;idata t函数fun的功能是:将字符串的字符按逆序输出,但不改变字符串的内容。例,若字符串为..._若传送给m的值为50,则程序输出,7.11.14.21.22.28.33.35.42.44.49,n=11

罗森伯格成功助力安徽省滁州市公安局110指挥中心项目-程序员宅基地

文章浏览阅读183次。安徽省滁州市公安局110指挥中心大楼(含附楼)建筑面积约60000平方米,大楼主要包括指挥中心技术用房、刑侦业务用房、特巡警用房、射击靶场、×××服务大厅、民警训练场、餐厅等,场地景观及附属建筑。建筑主体以办公为主,同时在主体大楼内也规划了公安体系数据中心。 作为整个IT/弱电系统的基础,综合布线系统在此项目中尤其显的重要。通过业主的严密筛...

OS_Sched 函数_os_sched.h-程序员宅基地

文章浏览阅读9.4k次,点赞4次,收藏8次。//任务调度//uCOS-II总是运行进入就绪态任务中优先级最高的那一个。确定哪个任务优先级最高,下面该哪个任务运行了的工作是//由调度器(Scheduler)完成的。任务级的调度是由函数OSSched()完成的。中断级的调度是由另一个函数OSIntExt()完//成的Scheduling。//注意:1) 这是一个uCOS-II内部函数,你不能在应用程序中使用它// 2_os_sched.h

物联网开发笔记(46)- 使用Micropython开发ESP32开发板之控制光敏传感器_esp32光敏传感器-程序员宅基地

文章浏览阅读2k次,点赞3次,收藏24次。使用Micropython开发ESP32开发板之控制光敏传感器_esp32光敏传感器

推荐文章

热门文章

相关标签