个人博客 地址:http://www.wenhaofan.com/article/20181210124818
介绍
如果你使用过Vue，那么就知道使用Vue构建一个单页应用是非常简单快捷的。而什么是单页应用呢，单页应用 即SPA（全称为:single page web application），简单来说就是整个网站只有一个页面，整个站点的所有展示都在浏览器中通过异步的方式进行渲染，而这种异步渲染有个弊端就是非常不利于SEO，因为整个站点的数据都是在浏览器中进行渲染，但是百度等搜索引擎的蜘蛛只会抓取你服务端返回来的html，所以搜索引擎将不能获取到你的站点内容。
尽管Vue也提供了SSR渲染，但是Nuxt在Vue基础上做了更方便的集成，使用Nuxt能够更快捷方便的进行项目开发，Nuxt流程图如下
安装
方式一(推荐新手使用)
Nuxt官方团队为我们提供了一个方便的脚手架 create-nuxt-app，使用create-nuxt-app我们能快速的创建一个nuxt项目。
使用该脚手架需要使用npx，首先确保你正确的配置了npm，NPM版本5.2.0默认安装了npx，如果你的电脑上没有npx,仅需要执行下 npm install npx即可，现在我们来创建一个nuxt项目
首先执行以下命令
npx create-nuxt-app <项目名>
接下来它会让你进行一些选择（使用上下键进行选择，然后回车提交即可）:
1. 在集成的服务器端框架之间进行选择 (此处默认即可):
None (Nuxt默认服务器)
Express
Koa
Hapi
Feathers
Micro
Adonis (WIP)
2.选择您喜欢的UI框架 （如果你不知道怎么选，那么选择Element UI 吧）:
None (无)
Bootstrap
Vuetify
Bulma
Tailwind
Element UI
Ant Design Vue
Buefy
3.选择你想要的Nuxt模式 (Universal or SPA)
4. 添加 axios module 以轻松地将HTTP请求发送到您的应用程序中。
5.添加 EsLint 以在保存时代码规范和错误检查您的代码。
6.添加 Prettier 以在保存时格式化/美化您的代码。
当运行完时，它将安装所有依赖项，因此下一步是启动项目:
$ npm run dev
应用现在运行在 http://127.0.0.1:3000 上运行。
浏览器访问 http://127.0.0.1:3000 既可看见默认demo
方式二
方式一使用了官方提供的脚手架来进行搭建，这里我们将手动添加Nuxt依赖来搭建一个demo
1.首先进入你的工作空间,分别键入以下命令,将 <项目名> 替换成为你想创建的实际项目名。
mkdir <项目名>
cd <项目名>
2.创建package.json 文件
package.json 文件用来设定如何运行 nuxt：
{
"name": "my-app",
"scripts": {
"dev": "nuxt"
}
}
上面的配置使得我们可以通过运行 npm run dev 来运行 nuxt。
安装 nuxt
一旦 package.json 创建好， 可以通过以下npm命令将 nuxt 安装至项目中：
npm install --save nuxt
pages 目录
Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置。
创建 pages 目录：
$ mkdir pages
创建我们的第一个页面 pages/index.vue：
<template>
<h1>Hello world!</h1>
</template>
然后启动项目：
$ npm run dev
现在我们的应用运行在 http://127.0.0.1:3000 上运行。
浏览器访问 http://127.0.0.1:3000 既可看见