type
status
date
slug
summary
tags
category
icon
Property
Sep 6, 2022 06:51 AM
官网
概念
Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。
简单的来说，就是基于原有的通用应用框架（如vue或react）， 通过对客户端/服务端基础架构的抽象组织，进行应用的UI渲染。
Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用：
Vue2
Vue-Router
Vuex (当配置了 Vuex 状态树配置项 时才会引入)
Vue 服务器端渲染 (排除使用 mode: 'spa')
Vue-Meta
Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 来处理代码的自动化构建工作（如打包、代码分层、压缩等等）。
特性：
基于 Vue.js
自动代码分层
服务端渲染
强大的路由功能，支持异步数据
静态文件服务
ES2015+ 语法支持
打包和压缩 JS 和 CSS
HTML 头部标签管理
本地开发支持热加载
集成 ESLint
支持各种样式预处理器： SASS、LESS、 Stylus 等等
支持 HTTP/2 推送
流程图
下图阐述了 Nuxt.js 应用一个完整的服务器请求到渲染（或用户通过 <nuxt-link> 切换路由渲染页面）的流程：
服务端渲染(通过 SSR)
可以使用Nuxt.js作为框架来处理项目的所有 UI 呈现。
启动时nuxt，它将启动具有热更新加载的开发服务器，并且Vue 服务器端渲染配置为自动为服务器呈现应用程序。
单页应用程序 (SPA)
不想使用服务器端渲染或需要应用程序提供静态托管，则可以使用 nuxt --spa 命令即可使用 SPA 模式。它提供了强大的 SPA 部署机制，无需使用 Node.js 来运行应用程序或任何特殊的服务器端处理。
安装
npx create-nuxt-app 项目名 或 yarn create nuxt-app 项目名
启动项目：npm run dev 或 yarn dev
目录结构：
- *资源目录 assets：**用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
- *组件目录 components：**用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
- *布局目录 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文件：**用于描述应用的依赖关系和对外暴露的脚本接口。该文件不能被重命名。
配置：
路由：
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
在页面之间使用路由，建议使用<nuxt-link> 标签。
api
- 作者:侯旭阳
- 链接:https://www.houxuyang.online//article/c79f1d3c-7a83-4ee7-8f4e-1e10de45ddb2
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。