Nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染)。再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用,并在服务端完成渲染。这时候就出现了Nuxt.js这个框架,她简化了SSR的开发难度。还可以直接用命令把我们制作的vue项目生成为静态html。

什么是SSR?

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

SSR两个优点:

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

Nuxt.js的官方网站是这样介绍的:

Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。

Nuxt.js是特点(优点):

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

一、Nuxt环境搭建

1.用npm来安装vue-cli这个框架,如果你已经安装过了,可以省略这步。

npm install vue-cli -g

安装完成后可以使用vue -V 来测试是否安装成功。(注意:这里要使用大写的V,小写无效)。

2.使用vue安装 nuxt

安装好vue-cli后,就可以使用init命令来初始化Nuxt.js项目。

vue init nuxt/starter

这时候他会在github上下载模版,然后会询问你项目的名称叫什么,作者什么的,这些完全可以根据自己的爱好填写。

3.使用npm install安装依赖包

npm install

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

4.使用npm run dev 启动服务

npm run dev

5.在浏览器输入 localhost:3000,可以看到结果。

Hello World

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

  1. js入门学习~ 运动应用小例

    要实现的效果如下: 鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~ (且各运动相互之前不干扰)  主要是练习多个物体的运动框架~~ --------------------- ...

  2. JS入门学习,写一个时钟~

    <!-- 耽搁了几天,于是又继续回到JS的学习了~~ 各种头大,加油吧... --> <!doctype html><html><head> <t ...

  3. react webpack.config.js 入门学习

    在学习react 的时候必然会用到webpack打包工具,webpack的快速入门另外一篇文章中有记录,这里只记录webpack.config.js文件,因为每个项目下都必须配置,通俗的讲,它的作用就 ...

  4. 测试驱动开发(TDD)及测试框架Mocha.js入门学习

    组里马上要转变开发模式,由传统的开发模式(Developer开发,QA测试),转变为尝试TDD(Test-driven development,测试驱动开发)的开发模型.由此将不存在QA的角色,或者仅 ...

  5. JS入门学习,写一个简单的选项卡

    /* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById('');    一定要多输,熟悉后o u什么的字母别搞 ...

  6. Node.js入门学习笔记(一)

    先来个最常见的"Hello World!". 打开你最喜欢的编辑器(我用的是Sublime Text),创建一个helloWorld.js的文件.我们要做的就是向stdout输出& ...

  7. Vue.JS入门学习随笔

    PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!!   Vue.js(读音 /vjuː/, 类似于view ...

  8. require.js 入门学习 (share)

    以下内容转自阮一峰老师的网络日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html 更多学习资源: require.js官网:http:// ...

  9. vue.js 入门学习

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. P5312 [Ynoi2011]D2T1

    思路:01trie 按位维护 提交:5边 错因:爆int + 少处理询问时的右端点 题解: 见代码(已经不想说什么了) 代码 //I have my own flg; #include<bits ...

  2. Greenplum 的发展历史

    一.Greenplum的发展历史 Greenplum的发展可以分为下面6个阶段:   图 1 Greenplum时间线 Postgres关系型数据库.Postgres是UC Berkeley开发的关系 ...

  3. 浏览器console中加入jquery,测试选择元素

    一.chrome浏览器F12打开调试界面,在console中输入(firefox同样可以): var jquery = document.createElement('script'); jquery ...

  4. vue中setInterval的清除

    两种清除setInterval的方式: 方案一: data() { return { timer: null // 定时器名称 } }, mouted() { this.timer = (() =&g ...

  5. ECMAScript 5.0 基础语法(上)

    银子: 一般来说,一门编程语言的基础语法都是大同小异的.比如,python的基础语法,包括:数据类型,变量,作用域,运算符,流程控制(if...else...语句),循环,编码,数据类型的操作(增删改 ...

  6. Ubuntu14.04 挂载u盘

    插入u盘后, $cat /proc/partitions 发现多了 sdb sdb4 sdb是统称,所以新插入的U盘就是/dev/sdb4 $ls /dev |grep sdb sdb sdb4 查看 ...

  7. spring boot + swagger2

    spring boot集成swagger2:     swagger2是一个基于restful的开源设计,构建,文档,访问的开源工具集.开发中它的在线可视化文档功能,可以动态生成文档,简化前后对接工作 ...

  8. ORM SQLAlchemy - 基本关系模式

    1 一对多 一个parent对多个child,一对多关系添加一个外键到child表,用于保存对应parent.id的值,引用parent.relationship()在parent中指定,引用/保存 ...

  9. java并发编程--第一章并发编程的挑战

    一.java并发编程的挑战 并发编程需要注意的问题: 并发编程的目的是让程序运行的更快,然而并不是启动更多的线程就能让程序最大限度的并发执行.若希望通过多线程并发让程序执行的更快,会受到如下问题的挑战 ...

  10. https证书制作及springboot配置https

    1.生成秘钥 openssl genrsa -out private.key 2048 2.生成用于申请请求的证书文件csr,一般会将该文件发送给CA机构进行认证,本例使用自签名证书 openssl ...