NUXT简介

张云飞Vir

发布于 2024-03-06 00:36:03

42800

代码可运行

运行总次数：0

代码可运行

一、概述

通常使用 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 文件	依赖关系	用于描述应用的依赖关系和对外暴露的脚本接口。