Nuxt.js笔记

前置知识

SSR服务器渲染

Vue SSR（server side rendering）服务端渲染 和 Vue SPA（single page application）单页应用

Vue SSR->将本来要放在浏览器执行创建的组件，放到服务端先创建好，然后生成对应的html
将他们直接发送到浏览器，最后将这些静态标记激活为客户端完全可交互的应用程序

SSR针对SPA的好处：

1）更好的SEO，由于搜索引擎抓取工具可以直接查看完全渲染后的页面

2）更快的到达时间(time-to-content)，特别是对网络慢或者运行缓慢的设备

不好的地方：

1）开发条件所限。浏览器特定的代码，只能在某些生命周期钩子函数(lifecycle hook)中使用

2）涉及构建设置和部署的要求更多

3）更多的服务器端负载

Nuxt.js

Nuxt.js是使用 Webpack 和 Node.js 进行封装的基于Vue的SSR框架

它可以不需要自己搭建SSR程序，而是通过约定好的文件结构和API即可实现一个首屏渲染的Web应用

安装

1、先安装vue-cli（只需安装一次，安装过就不用装了）

2、使用vue安装nuxt

vue init nuxt/starter mynuxt(项目名)

然后cd mynuxt

3、使用npm install安装依赖包

npm install

4、最后启动服务

npm run dev

文件结构

assets：资源文件，放置需要经过 webpack 打包处理的资源文件，如 scss，图片，字体等

component 组件，这里存放在页面中，可以复用的组件

layouts 布局，所有页面都会加载在布局页面中的 <nuxt /> 标签中

middleware 中间件，可以在页面中调用： middleware: ‘middlewareName‘

pages 页面，用于生成对应路由，支持嵌套，支持动态路由

plugins 插件，SPA中用的各类第三方组件和一些node模块都可以在这引入

static 静态文件，放置不需要经过 webpack 打包的静态资源。如一些 js, css 库

store 状态管理，内置了vuex，可以直接返回数据模块或返回一个自建vuex根对象

nuxt.config.js，文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置

nuxt.config.js配置文件

对程序的扩展管理可大概分为以下类：

/*
build：主要对应 Webpack 中的各配置项，可以对默认的 Webpack 配置进行扩展，如这里代码
cache：主要对应内置的组件缓存模块lru-cache的配置对象，有默认值，可选关闭
css：对应我们在SPA随处引用样式文件的require语句
dev：用于自定义配置环境变量，对应之前webpack.config.js相关文件中的变量语句
env：同上息息相关
generate：对generate命令执行时的行为做一些定制
head：对应vue-meta插件的全局配置，vue-meta用于VUE/SSR程序的文档元信息的管理
loading：用于定制化Nuxt.js内置的进度条组件
performance：用于配置Node.js服务器性能上的配置
plugins：用于管理和应用对应plugins文件夹中的插件
rootdir：用于设置 Nuxt.js 应用的根目录（这俩api有很大合并的意义）
srcdir：用于设置 Nuxt.js 应用的源码目录（这俩api有很大合并的意义）
router：用于对vue-router的扩展和定制，其中还包括了中间件的配置，但并不完美
transition：用于定制Nuxt.js内置的页面切换过渡效果的默认属性值
watchers：用于定制Nuxt.js内置的文件监听模块chokidar和 Webpack 的相关配置项
*/

配置IP和端口

在package.json里面进行配置

   "config":{
        "nuxt":{
            "host":"127.0.0.1",
            "port":"2019"
        }
    }

配置好后，输入npm run dev重启下服务即可

Nuxt.js笔记

原文：https://www.cnblogs.com/theblogs/p/10739435.html