关键词：
起源
最主要的原因时使用vue-cli搭建的SPA（单页应用）不利于搜索引擎的SEO操作。搜索引擎对SPA的抓取并不好，特别是百度根本没法抓取到SPA的内容页面，所以我们必须把我们的应用在服务端渲染成适合搜索引擎抓取的页面，再下载到客户端。
Nuxt.js是Vue.js的通用框架，最常用的就是用来作SSR（服务器端渲染）。再直白点说，就是Vue.js原来是开发SPA（单页应用）的，但是随着技术的普及，很多人想用Vue开发多页应用，并在服务端完成渲染。这时候就出现了Nuxt.js这个框架，她简化了SSR的开发难度。还可以直接用命令把我们制作的vue项目生成为静态html。
首先说下 SSR，最近很热的词，意为 Server Side Rendering（服务端渲染），目的是为了解决单页面应用的 SEO 的问题，对于一般网站影响不大，但是对于论坛类，内容类网站来说是致命的，搜索引擎无法抓取页面相关内容，也就是用户搜不到此网站的相关信息。
既然说到 SSR 可以解决 SEO 的问题，不难想到原理就是将我们的 html 在服务端渲染，合成完整的 html 文件再输出到浏览器。
第一章 Nuxt.js介绍
Nuxt.js 是一个基于 Vue.js 的通用应用框架。
通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。
优点：
- 基于 Vue.js
- 自动代码分层
- 服务端渲染
- 强大的路由功能，支持异步数据
- 静态文件服务
- ES6/ES7 语法支持
- 打包和压缩 JS 和 CSS
- HTML头部标签管理
- 本地开发支持热加载
- 集成ESLint
- 支持各种样式预处理器： SASS、LESS、 Stylus等等
第二章 Nuxt.js环境搭建
Nuxt.js 团队提供了 vue-cli 的初始化模板。前提安装 vue-cli，安装过的忽略此步
首先，本机需要有node环境，这边不再阐述（均在命令行进行）。
1.安装vue-cli脚手架
npm install vue-cli -g
查看是否安装成功
vue -V
2.首先创建项目存放位置，即项目名称（盘符自选）
mkdir appName
3.进入项目目录，初始化Nuxt.js项目
cd appName
vue init nuxt/starter
会询问你项目的名称、作者之类的信息，自行填写。
4.安装依赖包
npm install
5.启动服务
npm run dev
6.此时，在浏览器输入localhost:3000，即可看到界面效果（如下图）。
现在，我们修改项目目录下的/pages/index.vue文件section里的内容为“HelloWorld”保存，浏览器中内容会热更新替换为“HelloWorld”。
第三章 Nuxt.js目录结构
|-- .nuxt // Nuxt自动生成，临时的用于编辑的文件，build |-- assets // 用于组织未编译的静态资源入LESS、SASS 或 JavaScript |-- components // 用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件 |-- layouts // 布局目录，用于组织应用的布局组件，不可更改。 |-- middleware // 用于存放中间件 |-- pages // 用于存放写的页面，我们主要的工作区域 |-- plugins // 用于存放JavaScript插件的地方 |-- static // 用于存放静态资源文件，比如图片 |-- store // 用于组织应用的Vuex 状态管理。 |-- .editorconfig // 开发工具格式配置 |-- .eslintrc.js // ESLint的配置文件，用于检查代码格式 |-- .gitignore // 配置git不上传的文件 |-- nuxt.config.json // 用于组织Nuxt.js应用的个性化配置，已覆盖默认配置 |-- package-lock.json // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作 |-- package-lock.json // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作 |-- package.json // npm包管理配置文件
第四章 修改配置项
1.配置IP和端口号
修改项目根目录package.json文件（如下图）
注意：修改配置文件、新增页面必须重启服务
此时，在浏览器地址栏输入http://127.0.0.1:8888，即可预览项目。
2.配置全局css
在目录/assets下新建css文件夹、在css文件夹下新建reset.css文件，写入
1 html 2 padding: 0; 3 margin: 0; 4 color: red; 5
修改根目录下的nuxt.config.js文件（如图）：
修改完以后，保存，页面效果会跟着变化。
这时候省查元素，head标签里就会正常引入reset.css文件样式了。
更多配置参考Nuxt官网配置。
第五章 Nuxt的路由与传参
Nuxt.js对路由进行了封装，无需像vue一样配置route/index.js，是自动生成的在目录/.nuxt/router.js。
1.创建一个简单的路由
我们在/pages下创建两个文件夹news和product，在文件夹下分别创建两个页面list和detail（如图）。
当我们创建完页面，会发现目录/.nuxt/router.js文件已经自动生成路由。多级路由后面再说。
现在填充页面内容：
/pages/index页面：
1 <template> 2 <section> 3 <div> 4 Index 5 <nuxt-link to="/news/list">news</nuxt-link> 6 <nuxt-link to="/product/list">product</nuxt-link> 7 </div> 8 </section> 9 </template>
/pages/news/list页面：
1 <template> 2 <section> 3 <div> 4 News/List 5 <nuxt-link to="/">index</nuxt-link> 6 <nuxt-link to="/news/detail">news detail</nuxt-link> 7 </div> 8 </section> 9 </template>
/pages/news/detail页面：
1 <template> 2 <section> 3 <div> 4 News/Detail 5 <nuxt-link to="/">index</nuxt-link> 6 </div> 7 </section> 8 </template>
/pages/product/list页面：
1 <template> 2 <section> 3 <div> 4 Product/List 5 <nuxt-link to="/">index</nuxt-link> 6 <nuxt-link to="/product/detail">product detail</nuxt-link> 7 </div> 8 </section> 9 </template>
/pages/product/detail页面：
1 <template> 2 <section> 3 <div> 4 Product/Detail 5 <nuxt-link to="/">index</nuxt-link> 6 </div> 7 </section> 8 </template>
页面填充完毕，这边使用的“nuxt-link”类似于“router-link”。点击链接即可实现跳转。
2.页面跳转传参
未完待续、、、
text创建nuxt.js项目(代码片段)
nuxt.js的学习(代码片段)
1、下载nuxt.js的脚手架npminstall-gcreate-nuxt-app这个命令默认下载的是最新版，现在的最新版是3.7.1，而我学习的是2.15.0，所以我需要指定版本安装（方便学习） 下载指定nuxt.js的版本npminstall-gcreate-nuxt-app@v2.15.0... 查看详情
linux部署nuxt.js项目(代码片段)
1.首先本地打包yarnbuild2.把.nuxt文件夹、static文件夹、nuxt.config.js、package.json和相关配置文件移到linux相关目录下3.在目录下执行yarn4. pm2start--name'tools' npm--rundev 查看详情
javascriptnodejs路由控制是否登录nuxt.js框架(代码片段)
text？nuxt.jsインストール(代码片段)
part3-3-3nuxt.js基础(代码片段)
Nuxt.js介绍官网:https://zh.nuxtjs.org/GitHub仓库:https://github.com/nuxt/nuxt.jsNuxt.js是一个基于Vue.js的服务端渲染应用框架，它可以帮我们轻松的实现同构应用。通过对客户端/服务端基础架构的抽象组织，Nuxt.js主要关注的是应用的UI... 查看详情
nuxt.js的学习elementui配置博客头部(代码片段)
1、修改项目head配置在nuxt.js的nuxt.config.js配置head，进行全局的配置head:title:'博客社区门户网',meta:[charset:'utf-8',name:'viewport',content:'width=device-width,initial-scale=1&# 查看详情
nuxt.js入门安装及灵活使用(代码片段)
Nuxt.js1、案例入门1.1、create-nuxt-app介绍1.2、安装1.3启动1.4、访问2、目录结构2.1、目录1.2、别名3、路由3.1、路由概述3.2、基础路由3.3、动态路由3.4、动态命名路由3.5、默认路由3.6、嵌套路由3.7、过渡动效3.7.1全局过渡动效设置3.7.2... 查看详情
nuxt.js的学习路由组件的学习(代码片段)
目录1、异步加载数据asyncData 2、axios请求数据3、axios拦截器4、Vue-Router nuxt-link5、动态路由（一）vue的动态路由（二）文件夹动态路由 6、嵌套路由 7、中间件8、Nuxt生命周期流程图分析1、异步加载数据asyncDataasync... 查看详情
nuxt与vue部署到服务器的区别(代码片段)
nuxt.js项目怎么部署到服务器？今天我们来讲一下怎么部署一个基于nuxt制作的网站，我们用nuxt制作的网站有什么好处？答：采用nuxt.js开发，一般都是为了实现SSR。让搜索引擎更好的抓取网页内容，就是利... 查看详情
part3-3-4nuxt.js打包发布部署(代码片段)
https://zh.nuxtjs.org/docs/2.x/get-started/commandspackage.json"scripts":"dev":"nuxt","build":"nuxtbuild","start":"nuxtstart","generate" 查看详情
nuxt按需引入element-ui(代码片段)
首先你要知道 nuxt.js怎么引入第三方插件 ；不多BB。第一步：安装babel-plugin-component：npminstallbabel-plugin-component-D第二步：修改plugins/element.js文件（plugins/element.js不知道怎么来的？出门左拐不送 nuxt.js怎么引入第三方插件... 查看详情
nuxt.js做站点地图(sitemap.xml)详解(代码片段)
前言在做跨境电商项目中seo是必须要做的，seo中站点地图(sitemap.xml，robots.txt)又是必不可少的,这里就记录一下nuxt中站点地图是如何做的。第一步:安装@/nuxt/sitemapnpminstall@nuxtjs/sitemap第二步:在根目录static目录下新建sit... 查看详情
nuxt.js的学习markdown(代码片段)
主要样式如下，做的表单提交， 基础表单模块如下 1、整体表单，ref="formData"相当于表单ID，:rules表示绑定规则属性<el-formref="formData":model="formData"label-width="100px& 查看详情
nuxt2即将来临(代码片段)
原文出处： ??Nuxt2iscoming!Ohyeah!–Nuxt.js–Medium [https://medium.com/nuxt/nuxt-2-is-coming-oh-yeah-212c1a9e1a67] 1.4.0发布25天后，Nuxt2就即将来临。超过330次提交，320次更改文件，8,200次添加和7,000次删除（不包括其他nuxtreposito 查看详情
nuxt.js做站点地图(sitemap.xml)详解(代码片段)
前言在做跨境电商项目中seo是必须要做的，seo中站点地图(sitemap.xml，robots.txt)又是必不可少的,这里就记录一下nuxt中站点地图是如何做的。第一步:在根目录static目录下新建sitemap.jssitemap.xml文件的内容importaxiosfrom"axios"... 查看详情
nuxt.js入门安装及灵活使用(代码片段)
...自定义布局4.4、错误页面4.5、Nuxt组件特殊配置4.5.1、模板代码4.5.2、head5、ajax操作5.1、整合axios5.1.1默认整合5.1.2手动整合5.1.3、常见配置5.2、使用axios发送ajax5.3、使用asyncData发送ajax5.3.1发送一次请求5.3.2、发送多次请求5.4、使用fet... 查看详情
vue和ssr+nuxt.js配置环境变量以及pm2进行服务部署(代码片段)
前言分享一下自己的ssr+nuxt.js开发的跨境电商的配置的项目环境变量。nuxt.js配置环境变量第一步：安装cross-env插件npminstallcross-env--save第二步：根目录下创建env.js文件第三步：env.js文件配置环境变量配置各个环境下... 查看详情