Nuxt学习笔记

Nuxt.js简单的说是Vue.js的通用框架，最经常使用的就是用来做SSR（服务器端渲染）。再直白点说，就是Vue.js原来是开发SPA（单页应用）的，可是随着技术的普及，不少人想用Vue开发多页应用，并在服务端完成渲染。这时候就出现了Nuxt.js这个框架，她简化了SSR的开发难度。还能够直接用命令把咱们制做的vue项目生成为静态html。

那服务器端渲染到底有什么好处那？

最主要的缘由时SPA（单页应用）不利于搜索引擎的SEO操做。好比你做一个新闻网站，流量的一个主要来源是经过百度、谷歌、bing这些搜索引擎，可是它们对SPA的抓取并很差，特别是百度根本无法抓取到SPA的内容页面，因此咱们必须把咱们的应用在服务端渲染成适合搜索引擎抓取的页面，再下载到客户端。那Nuxt.js适合做新闻、博客、电影、咨询这样的须要搜索引擎提供流量的项目。若是你要做移动端的项目，就不必使用这个框架了。（其实Nuxt.js我的觉的是一个解决方案）

 

什么是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.js安装

在使用npm前你须要安装Node到系统中，若是你还不会安装Node，那就不要学这节课了，而是从技术胖的Vue基础课程开始学起吧，等基础都学会了再来学这个也不迟。

1.用npm来安装vue-cli这个框架，若是你已经安装过了，能够省略这步。

npm install vue-cli -g

这个根据你的网络环境不一样，安装的速度不只相同，若是你的网络环境实在很差，能够考虑使用cnpm来进行安装。（在实际开发中我会尽可能避免使用cnpm来进行安装，由于会出现一些未知的错误。）

安装完成后可使用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,能够看到结果。

 

目录结构：

Nuxt自动生产了项目目录，咱们先来一个一个介绍一下。

|-- .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包管理配置文件