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. netcat的简单使用(一)

    简单写一下netcat这个强悍的工具,主要是怕自己忘了 功能大致这些个,有遗漏的欢迎私信补充 1.侦听模式/传输模式 2.telnet/获取banner信息 3.传输文本信息 4.传输文件/目录 5. ...

  2. navicat 将自增长字段重置(重新从1开始)的方法

    先说明,此语句会将你的表中数据全部删除. 很简单,运行如下sql语句: TRUNCATE TABLE 表名;

  3. SaaS服务和个性化需求,就不能鱼和熊掌兼得吗?

    随时随地.轻松高效,移动工作让人类的自由度最大化.但企业的移动化过程却不轻松:要综合考虑销售.产品.客服.市场销售.人力资源等错综复杂的流程和需求,以及原有IT系统.数据信息的对接. 千企千面,很难有 ...

  4. AI deeplab

    参考链接: https://arxiv.org/pdf/1412.7062v3.pdf

  5. 【Topcoder 1643】PossibleOrders

    题意:给一些等价关系,问把所有的数按照大小排序的种类数. 思路:首先并查集维护等价类,然后设有\(n\)个等价类. 那么就可以\(dp\)了. 考虑\(dp(i)\)表示还剩下\(i\)个等价类,答案 ...

  6. 越狱解决iphone4s外放无声音

    删除iphone中/System/Library/PrivateFrameworks/IAP.framework/Support/目录下的iapd文件 进入/SYSTEM/Library/Launch ...

  7. 通过C#学Proto.Actor模型》之Remote

    Proto.Actor中提供了基于tcp/ip的通迅来实现Remote,可以通过其Remot实现对Actor的调用. 先来看一个极简单片的远程调用. 码友看码: 引用NuGet包 Proto.Acto ...

  8. java将对象转map,map转对象工具类

    /** * 将map转换为一个对象 * * @param map * @param beanClass * @return * @throws Exception */ public static O ...

  9. ARC089E GraphXY 构造

    传送门 在Luogu上评了"NOI"之后评级变成了"普及+/提高"--我觉得我可能要退群了 考虑构造一个这样的图: 其中上半部分是从\(S\)开始的一条长\(1 ...

  10. BZOJ3328 PYXFIB 单位根反演

    题意:求 \[ \sum_{i=0}^n[k|i]\binom{n}{i}Fib(i) \] 斐波那契数列有简单的矩阵上的通项公式\(Fib(n)=A^n_{1,1}\).代入得 \[ =\sum_{ ...