文档章节

Nuxt.js学习(一) --- 让你清晰了解Nuxt.js、Nuxt.js环境搭建、Hello Nuxt

庭前云落
 庭前云落
发布于 2019/12/14 14:27
字数 1027
阅读 122
收藏 0

[TOC]

1、初识Nuxt.js

官网:https://zh.nuxtjs.org/guide/

Nuxt.js是一个基于Vue.js的通用应用框架。主要关注的是应用的UI渲染

Nuxt.js预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。

我们都知道Vue.js原来是开发SPA(单页应用)的,现在很多人想用Vue开发多页应用,并想要在服务端完成渲染。Nuxt.js应运而生,她简化了SSR的开发难度,而且还可以直接用命令把我们制作的vue项目生成静态html

nuxt generate命令:为基于Vue.js的应用提供生成对应的静态站点的功能。

按照官方说法:"是向开发集成各种微服务(Microsevices)的Web应用迈开的新一步"

作为框架,Nuxt.js为客户端/服务端这种典型的应用架构模式提供了许多有用的特性,例如异步数据加载、中间件支持、布局支持等。

什么是SSR?

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

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

SEO:VUE SPA(单页) 新闻 搜索引擎

2、到底NUXT.js有什么吸引人的地方?

2.1用Nuxt.js的原因

最主要的原因是SPA(单页应用)不利于搜索引擎SEO操作,比如制作一个类似新闻网站等,流量的一个主要来源是通过百度等搜索引擎,但是它们对SPA的抓取并不好,特别是百度根本没法抓取到SPA的内容也没,所以我们必须把我们的应用在服务端渲染成适合搜索引擎抓取的页面,再下载到客户端。Nuxt.js适合做新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。

2.2、NUXT.JS特性(优点):

  • 基于Vue.js
  • 自动代码分层
  • 服务端渲染
  • 强大的路由功能,支持异步数据
  • 静态文件服务
  • ES2015+语法支持
  • 打包和压缩JS和CSS
  • HTML头部标签管理
  • 本地开发支持热加载
  • 集成ESLint
  • 支持各种样式预处理器:SASS、LESS、Stulus等等
  • 支持HTTP/2推送

3、Nuxt环境搭建 --- Hello Nuxt

3.1、nuxt.js安装

在使用npm前需要安装Node到系统中,如果你还没有或是不会安装Node,那就先从Vue基础课程开始学起吧。如果你已经安装了,省略这步。

npm install vue-cli -g

测试是否安装成功(出现版本号,即为安装成功)

vue-V

3.2、使用vue安装nuxt

使用init命令来初始化Nuxt.js项目

vue init nuxt/starter

3.3、使用npm instal安装依赖包

npm install

这个过程要等一会,如果这个过程安装失败,不要慌,你可以直接删除项目中的node_modules文件夹后,重新npm install安装

3.4使用npm run dev启动服务

npm run dev

3.5、Hello Nuxt

国际惯例,来个Hello World

在项目根目录下找到/pages/index.vue文件,让后把项目名称改写成Hello World(这里我就写自己名字了)。框架支持热更新,所以你不用刷新就自动更新了。

详细的视频教程可以点击jspang的网站,免费观看 https://www.jspang.com/detailed?id=37

© 著作权归作者所有

庭前云落

庭前云落

粉丝 17
博文 55
码字总数 45645
作品 0
南京
程序员
私信 提问
从0带您打造企业级 Vue 服务器渲染 Nuxt.js (一) 入门

写在开始前 公司团队技术栈一直主要使用 Vue,由于 SPA 模式开发有几大痛点,团队在2017年开始尝试 SSR(服务端渲染)。 记得刚开始 Nuxt.js 还没有到1.0(坑哭了),到目前为止团队已经经历...

喝不醉再来
2019/04/25
0
0
美团点评点餐 Nuxt.js 实战

一、背景 在今年年初我开始接触vue的时候,就发现在vue官方文档中“服务端渲染”的一节中提到了Nuxt.js框架,SSR这种方式对于首屏的加载时间优化显而易见,同时还可以方便的进行SEO。美团点评...

美团点评点餐
2017/08/09
0
0
前端框架Vue(17)——基于 Vue.js 的服务端渲染 (ssr) 通用应用框架 Nuxt.js

这篇文章旨在通过一个小的 demo, 来回答三个问题:1、什么是 Nuxt.js。2、如何启用一个Nuxt.js 项目。3、如何构建一个通用的 ssr 项目。 一、友情链接 1、Nuxt.js 官网 2、Github(Nuxt.js)...

docallen
2018/02/12
0
0
Nuxt.js 开发SSR(服务端渲染)Web应用

1. 初识 Nuxt.js Nuxt.js 是一个基于 Vue.js 的通用应用框架。 与 vuepress 的关系: Nuxt.js 能够胜任 VuePress 的功能,但它专为构建应用程序而设计,而 VuePress 更适合构建以内容为中心的...

kenbliky
2019/09/19
0
0
服务端与客户端同构 —— Vue.js 应用框架 Nuxt.js

通用(也称同构)的JavaScript已经成为JavaScript社区很常用的一个术语。通用的JavaScript用来形容可以在客户端执行,也可在服务端执行的Javascript代码。 作者的其他文章 Fetching Data fr...

a独家记忆
2018/07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Kettle自定义jar包供javascript使用

我们都知道 Kettle 是用 Java 语言开发,并且可以在 JavaScript 里面直接调用 java 类方法。所以有些时候,我们可以自定义一些方法,来供 JavaScript 使用。 本篇文章有参考自:https://www...

CREATE_17
昨天
102
0
处理CSV文件中的逗号

我正在寻找有关如何处理正在创建的csv文件的建议,然后由我们的客户上传,并且该值可能带有逗号(例如公司名称)。 我们正在研究的一些想法是:带引号的标识符(值“,”值“,”等)或使用|...

javail
昨天
79
0
如何克隆一个Date对象?

将Date变量分配给另一个变量会将引用复制到同一实例。 这意味着更改一个将更改另一个。 如何实际克隆或复制Date实例? #1楼 简化版: Date.prototype.clone = function () { return new ...

技术盛宴
昨天
73
0
计算一个数的数位之和

计算一个数的数位之和 例如:128 :1+2+8 = 11 public int numSum(int num) { int sum = 0; do { sum += num % 10; } while ((num = num / 10) > 0); return sum;......

SongAlone
昨天
124
0
为什么图片反复压缩后普遍会变绿,而不是其他颜色?

作者:Lion Yang 链接:https://www.zhihu.com/question/29355920/answer/119088684 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 业余版概要:安卓的...

shzwork
昨天
81
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部