SSR服务端渲染

之前用vue做项目时,在浏览器中查看网页源码,是没有具体内容的,只有一个标签,用服务端渲染的话,查看网页源码数据都会显示出来,所以有利于SEO,能够被搜索到。

Nuxt.js是做Vue SSR的框架,基于vue 2,

包含了vue-router,(vue本身不带路由,是通过插件的方式做路由,把vue-router的配置变得非常简单,甚至不用配就能用)

支持vuex,(跨组件的状态管理工具)

支持vue-server-render,

支持vue-meta。

安装

官网安装方式:npx create-nuxt-app nuxt-learn

vue init nuxt-community/koa-template nuxt-learn

github地址

nrm ls:查看npm配置

nrm use npm(切换安装源)

安装注意事项:

在选择你想要的Nuxt模式(universal or SPA)时,选universal

nuxt.js目录:

REAMD.md

assets:资源目录

components:组件目录

layouts:布局目录

middleware:中间件目录

pages:页面目录,页面入口

plugins:插件目录

static:静态文件目录

backpack.config.js

build

node_modules

nuxt.config.js

package-lock.json

package.json

server,放置koa相关的程序

store,放置vuex

路由

页面模板(layouts)

异步数据,SSR剖析

vuex应用

注意事项

mounted()不会在服务器端执行,只会在浏览器端执行,

asyncData()请求异步数据,服务器端把编译好的内容下发给你,把异步获取到的数据也同时扔给浏览器端,

用fetch()主要用来处理和vuex相关的事情,asyncData()是用来处理组件的数据

Nuxt.js学习的更多相关文章

  1. Nuxt.js学习心得

    一.官网 Nuxt.js - Universal Vue.js Applications https://nuxtjs.org/ 二.中文官网 Nuxt.js - Vue.js 通用应用框架 http ...

  2. Nuxt.js 学习笔记

    起源 最主要的原因时使用vue-cli搭建的SPA(单页应用)不利于搜索引擎的SEO操作.搜索引擎对SPA的抓取并不好,特别是百度根本没法抓取到SPA的内容页面,所以我们必须把我们的应用在服务端渲染成 ...

  3. Nuxt.js学习(二) --- Nuxt目录结构详解、Nuxt常用配置项、Nuxt路由配置和参数传递

    [TOC] 1.Nuxt目录结构详解 Nuxt项目文件目录结构 |-- .nuxt // Nuxt自动生成,临时的用于编辑的文件,build |-- assets // 用于组织未编译的静态资源入LE ...

  4. nuxt.js学习初探

    项目目标 把我个人博客的前端界面部分使用nuxt框架进行服务端渲染 nuxt介绍 nuxt可以把spa根据路由将单页面分割成多页面,比起vue的ssr渲染要更容易使用 nuxt的使用 项目创建 npx ...

  5. Nuxt.js入门学习

    Nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用, ...

  6. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二八║ Nuxt 基础:面向源码研究Nuxt.js

    前言 哈喽大家周五好,又是一个开开心心的周五了,接下来就是三天小团圆啦,这里先祝大家节日快乐咯,希望都没有加班哈哈,今天公司发了月饼,嗯~时间来不及了,上周应该搞个活动抽中几个粉丝发月饼的,下次吧,这 ...

  7. Nuxt.js开启SSR渲染快速入门

    第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多 ...

  8. 解析Nuxt.js Vue服务端渲染摸索

    本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Nuxt.js 十分简单易用.一个简单 ...

  9. 🏃‍♀️点亮你的Vue技术栈,万字Nuxt.js实践笔记来了~

    前言 作为一位 Vuer(vue开发者),如果还不会这个框架,那么你的 Vue 技术栈还没被点亮. Nuxt.js 是什么 Nuxt.js 官方介绍: Nuxt.js 是一个基于 Vue.js 的通用 ...

随机推荐

  1. 虚拟机 与 host主机,无法ping通的问题

    这个写的比较简单,先做以下记录 centos虚拟机安装到别的电脑上,因为linux中的程序需要向外有网络互通,所以需要重新设置ip 通过 ifconfig eth4 192.168.0.20  bro ...

  2. window批处理修改计算机名

    一.需要重启 @echo offset /p pcnanme=请输入计算机的名字:reg add HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\Com ...

  3. 【Python 17】B分R计算器1.0(数值类型)

    1.案例描述 基础代谢率(BMR):我们安静状态下(通常为静卧状态)消耗的最低热量,人的其他活动都建立在这个基础上. 计算公式: BMR(男) = (13.7*体重kg)+(5.0*身高cm)-(6. ...

  4. 好程序员技术教程分享JavaScript运动框架

    好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...

  5. Redtiger SQL注入练习(一)

    感觉会的东西太少了,以后要多练习,多写博客.要坚持学习,一定不能放弃,为梦想奋斗. redtiger  这个平台早就开始做了,但是才做到第4关.... 第一关: 打开题, 先随便试,后来发现点击 Ca ...

  6. go笔记-限速器(limiter)

    参考: https://blog.csdn.net/wdy_yx/article/details/73849713https://www.jianshu.com/p/1ecb513f7632 http ...

  7. Linux内存管理 (9)mmap

    专题:Linux内存管理专题 关键词:文件映射.匿名映射.私有映射.共享映射 mmap/munmap是常用的一个系统调用,使用场景是:分配内存.读写大文件.连接动态库文件.多进程间共享内存. 更详细解 ...

  8. HNOI2019:My Dream

    反正这次的目标也不是进省队,目标就是做到最好吧-- 下面都是流水账~ Day -INF ~ Day -3 专题交流没什么好说的,模拟赛详见3.11-3.27省选前多校联考乱记和3.28-4.2CJ大毒 ...

  9. Unable to start web server; nested exception is org.springframework.context.ApplicationContextException: Unable to start ServletWebServerApplicationContext due to missing ServletWebServerFactory bean.

    SpringBoot启动时的异常信息如下: "C:\Program Files\Java\jdk1.8.0_161\bin\java" ......... com.fangxing ...

  10. Jmeter录制手机app脚本

    转:http://www.cnblogs.com/yangxia-test/p/5484616.html   环境准备: 1.手机 2.wifi 3.Jmeter   具体步骤: 1.启动Jmeter ...