nuxt学习记录

####1. nuxt.js 是什么？

背景：2016 年 10 月 25 日，zeit.co 背后的团队对外发布了 Next.js，一个 React 的服务端渲染应用框架。几小时后，与 Next.js 异曲同工，一个基于 Vue.js 的服务端渲染应用框架应运而生，我们称之为：Nuxt.js。

#### 画重点： 这句话的意思是说，nuxt和针对next而言的，都是服务端渲染的应用框架。

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

通过对客户的／服务端基础架构的抽象组织，Nuxt.js主要关注的是应用的UI渲染。

我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有node.js 项目中使用Nuxt.js .

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

除此之外，我们还提供了一种命令叫： nuxt generate ，为基于vue的应用提供生成对应的静态站点的功能。支持异步数据加载，中间件，布局等。

###2. Nuxt.js 框架是如何运作的？

基于vue webpack babel ,集成了vue2 . vue-router .vuex(vuex状态树)，vue-meta,压缩后28kb，（31kb）。nuxt使用webpack，vue-loader，babel-loader来处理代码的自动化构建。

###3.特性

####1.基于 Vue.js

####2 自动代码分层

####3 服务端渲染

####4 强大的路由功能，支持异步数据

####5 静态文件服务

####6 ES6/ES7 语法支持

####7 打包和压缩 JS 和 CSS

####8 HTML头部标签管理

####9 本地开发支持热加载

####10 集成ESLint

####11 支持各种样式预处理器： SASS、LESS、 Stylus等等

#### 3.1 服务端渲染

你可以使用 Nuxt.js 作为你项目的UI渲染框架。

当运行 nuxt 命令时，会启动一个支持 热加载 和 服务端渲染（基于Vue.js的 vue-server-renderer 模块）的开发服务器。

#### 3.2 应用的静态化

支持 Vue.js 应用的静态化算是 Nuxt.js 的一个创新点，通过 nuxt generate 命令实现。

该命令依据应用的路由配置将每一个路由静态化成为对应的HTML文件。

静态化可以让你在任何一个静态站点服务商托管你的web应用。

Nuxt.js 的官网就是一个绝佳的例子, 它静态化后托管于GitHub Pages：

源码

静态化后的文件

在每次更新文档代码的时候，为了避免手工执行 nuxt generate 命令生成静态文件，我们可以在每次提交代码的时候调用一个AWS Lambda函数来做以下的事情：

拷贝 nuxtjs.org 源码

使用 npm install 命令安装依赖

运行 nuxt generate

将生成的 dist 目录提交至 gh-pages 分支

#### 4. 安装 

vue init nuxt-community/starter-template 这里不能只写前面的哇，装不下的，会报404.

如果 vue-cli 没有安装, 需先通过 npm install -g vue-cli 来安装。

然后安装依赖包：

$ cd

$ npm install

接着通过以下命令启动项目：

$ npm run dev