NUXT简介
一、概述
通常使用 VUE 开发的是单页应用，简称SPA。随着工程不断变大，打包文件不断增长，页面的整体刷新加载速度慢慢成为瓶颈，越来越无法满足业务对页面响应速度的要求。单页应用由于主体是一个大的js，对搜索引擎不友好。
因而开发方式又讨论到SSR方案（服务端渲染），这是传统的开发方式，比如JSP，PHP，thyemeleaf 等。它是在服务端生成HTML，返回给浏览器使用。
SSR的优点：1、对SEO友好。2、更快的内容到达时间。 所以在使用SSR的第一个场景，必然是对响应速度有较高的要求
SSR的瓶颈点和风险： 1、更长的链路，之前是 浏览器 ==> Nginx ==> 后台服务，而现在就变成 浏览器 ==> Nginx ==> nodejs ==> 后台服务。 2、nodejs中的阻塞型请求，容易成为性能的瓶颈。 3、对业务开发人员来说，曲线变长
Nuxt.js 是一个基于 Vue.js 的通用应用框架。适用于服务端渲染SSR的场景。
二、开始使用
使用脚手架直接启动
$ npx create-nuxt-app <项目名>应用现在运行在 http://localhost:3000 上运行。
三、应用
源代码目录
文件夹 | 名称 | 说明 |
|---|---|---|
assets | 资源目录 | assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript |
components | 组件目录 | 用于组织应用的 Vue.js 组件。 |
layouts | 布局目录 | 用于组织应用的布局组件。 |
middleware | 中间件 | 目录用于存放应用的中间件 |
pages | 页面目录 | 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置 |
plugins | 插件目录 | 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。 |
static | 静态文件目录 | 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。 |
store | 状态树 | 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。 |
nuxt.config.js 文件 | 个性化配置 | 用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。 |
package.json 文件 | 依赖关系 | 用于描述应用的依赖关系和对外暴露的脚本接口。 |
别名
别名 | 目录 |
|---|---|
~ 或 @ | srcDir |
~~ 或 @@ | rootDir |
默认情况下，srcDir 和 rootDir 相同。