您当前的位置:首页 > 电脑百科 > 程序开发 > 框架

Nuxt.js一个基于VUE的服务端渲染框架

时间:2021-03-22 10:56:49  来源:  作者:
官网:https://nuxtjs.org/
github:https://github.com/nuxt/nuxt.js

什么是Nuxt.js

易于使用的Vue 框架,使用 NuxtJS 充满信心地构建您的下一个 Vue.js 应用程序。 一个 开源 框架,让 Web 开发变得简单而强大。


为什么选择 NuxtJS

模块化

Nuxt 基于强大的模块化体系结构。您可以从 50 多个模块中进行选择,以使您的开发更快,更轻松。您无需重新发明轮子即可获得 PWA 好处,无需在页面上添加 google Analytics 或生成站点地图。

高效率

借助 Nuxt.js,您的应用程序将得到开箱即用的优化。我们尽最大努力通过利用 Vue.js 和 Node.js 最佳实践来构建高性能应用程序。为了从应用程序中挤出所有不必要的内容,Nuxt 包括捆绑分析器和许多微调您的应用程序的机会。

令人愉快

我们的主要重点是开发人员体验。我们喜欢 Nuxt.js,并且会不断改进框架,所以您也喜欢它!
期待有吸引力的解决方案,描述性的错误消息,强大的默认值和详细的文档。 如果有问题或疑问,我们有用的社区将为您提供帮助。

特点

服务器端渲染

这是 Nuxt 最受欢迎的模式。使用 SSR(也称为 "universal" 或 "isomorphic" 模式),将使用 Node.js 服务器将基于 Vue 组件的 html 传递给客户端,而不是纯 JAVAScript。与传统的 Vue SPA 相比,使用 SSR 将带来更大的 seo 提升,更好的用户体验和更多的机会。
由于单独实施 SSR 可能非常繁琐,因此 Nuxt.js 可为您提供全面的支持,并将处理常见的缺陷。

静态生成

静态网站生成是当前非常热门的话题(又名 JAMStack)。与其切换到另一个框架并花时间去适应它,不如一石二鸟? ( )
Nuxt.js 支持根据您的 Vue 应用程序生成静态网站。它是 “两全其美” 的选择,因为您不需要服务器,但仍然拥有 SEO 的好处,因为 Nuxt 会预先渲染所有页面并包含必要的 HTML。另外,您可以轻松地将结果页面部署到 Netlify 或 GitHub 页面。


Nuxt.js 安装

运行 create-nuxt-App

为了快速入门,Nuxt.js团队创建了脚手架工具 create-nuxt-app。

确保安装了npx(npx在NPM版本5.2.0默认安装了):

$ npx create-nuxt-app <项目名>

或者用yarn :

$ yarn create nuxt-app <项目名>

它会让你进行一些选择:

  1. 在集成的服务器端框架之间进行选择:None (Nuxt默认服务器)ExpressKoaHapiFeathersMicroFastifyAdonis (WIP)
  2. 选择您喜欢的UI框架:None (无)BootstrapVuetifyBulmaTailwindElement UIAnt Design VueBuefyiViewTachyons
  3. 选择您喜欢的测试框架:None (随意添加一个)JestAVA
  4. 选择你想要的Nuxt模式 (Universal or SPA)
  5. 添加 axIOS module 以轻松地将HTTP请求发送到您的应用程序中。
  6. 添加 EsLint 以在保存时代码规范和错误检查您的代码。
  7. 添加 Prettier 以在保存时格式化/美化您的代码。

当运行完时,它将安装所有依赖项,因此下一步是启动项目:

$ cd <project-name>
$ npm run dev

应用现在运行在 http://localhost:3000 上运行。

注意:Nuxt.js 会监听 pages 目录中的文件更改,因此在添加新页面时无需重新启动应用程序。

从头开始新建项目

如果不使用 Nuxt.js 提供的 starter 模板,我们也可以从头开始新建一个 Nuxt.js 应用项目,过程非常简单,只需要 1个文件和1个目录。如下所示:

$ mkdir <项目名>
$ cd <项目名>

提示: 将 <项目名> 替换成为你想创建的实际项目名。

新建 package.json 文件

package.json 文件用来设定如何运行 nuxt:

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

上面的配置使得我们可以通过运行 npm run dev 来运行 nuxt。

安装 nuxt

一旦 package.json 创建好, 可以通过以下npm命令将 nuxt 安装至项目中:

$ npm install --save nuxt

pages 目录

Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置。

创建 pages 目录:

$ mkdir pages

创建我们的第一个页面 pages/index.vue:

<template>
  <h1>Hello world!</h1>
</template>

然后启动项目:

$ npm run dev

现在我们的应用运行在 http://localhost:3000 上运行


Nuxt.js 目录结构

资源目录

资源目录 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 进行构建编译处理。 服务器启动的时候,该目录下的文件会映射至应用的根路径 / 下。

举个例子: /static/robots.txt 映射至 /robots.txt

若无额外配置,该目录不能被重命名。

Store 目录

store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置,在 store 目录下创建一个 index.js 文件可激活这些配置。

若无额外配置,该目录不能被重命名。

nuxt.config.js 文件

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

若无额外配置,该文件不能被重命名。

package.json 文件

package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。

该文件不能被重命名。

别名

别名

目录

~ 或 @

srcDir

~~ 或 @@

rootDir

默认情况下,srcDir 和 rootDir 相同。


Nuxt.js 配置

build

Nuxt.js 允许你在自动生成的 vendor.bundle.js 文件中添加一些模块,以减少应用 bundle 的体积。如果你的应用依赖第三方模块,这个配置项是十分实用的。

css

该配置项用于定义应用的全局(所有页面均需引用的)样式文件、模块或第三方库。

dev

该配置项用于配置 Nuxt.js 应用是开发还是生产模式。

env

该配置项用于定义应用客户端和服务端的环境变量。

generate

该配置项用于定义每个动态路由的参数,Nuxt.js 依据这些路由配置生成对应目录结构的静态文件。

head

该配置项用于配置应用默认的meta标签。

loading

该配置项用于个性化定制 Nuxt.js 使用的加载组件。

modules

该配置项允许您将Nuxt模块添加到项目中。

modulesDir

该配置项允许您定义Nuxt.js应用程序的node_modules文件夹。

plugins

该配置项用于配置那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。

rootDir

该配置项用于配置 Nuxt.js 应用的根目录。

router

该配置项可用于覆盖 Nuxt.js 默认的 vue-router 配置。

server

此选项允许您配置Nuxt.js应用程序的服务器实例变量。

srcDir

该配置项用于配置应用的源码目录路径。

dir

此选项允许您配置Nuxt.js应用程序的自定义目录。

transition

该配置项用于个性化配置应用过渡效果属性的默认值。


觉得效果不错的请帮忙加个关注点个赞,每天分享前端实用开发技巧



Tags:渲染框架   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
官网:https://nuxtjs.org/github:https://github.com/nuxt/nuxt.js什么是Nuxt.js易于使用的Vue 框架,使用 NuxtJS 充满信心地构建您的下一个 Vue.js 应用程序。 一个 开源 框架...【详细内容】
2021-03-22  Tags: 渲染框架  点击:(314)  评论:(0)  加入收藏
▌简易百科推荐
近日只是为了想尽办法为 Flask 实现 Swagger UI 文档功能,基本上要让 Flask 配合 Flasgger, 所以写了篇 Flask 应用集成 Swagger UI 。然而不断的 Google 过程中偶然间发现了...【详细内容】
2021-12-23  Python阿杰    Tags:FastAPI   点击:(6)  评论:(0)  加入收藏
文章目录1、Quartz1.1 引入依赖<dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>quartz</artifactId> <version>2.3.2</version></dependency>...【详细内容】
2021-12-22  java老人头    Tags:框架   点击:(11)  评论:(0)  加入收藏
今天来梳理下 Spring 的整体脉络啦,为后面的文章做个铺垫~后面几篇文章应该会讲讲这些内容啦 Spring AOP 插件 (了好久都忘了 ) 分享下 4ye 在项目中利用 AOP + MybatisPlus 对...【详细内容】
2021-12-07  Java4ye    Tags:Spring   点击:(14)  评论:(0)  加入收藏
&emsp;前面通过入门案例介绍,我们发现在SpringSecurity中如果我们没有使用自定义的登录界面,那么SpringSecurity会给我们提供一个系统登录界面。但真实项目中我们一般都会使用...【详细内容】
2021-12-06  波哥带你学Java    Tags:SpringSecurity   点击:(18)  评论:(0)  加入收藏
React 简介 React 基本使用<div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js...【详细内容】
2021-11-30  清闲的帆船先生    Tags:框架   点击:(19)  评论:(0)  加入收藏
流水线(Pipeline)是把一个重复的过程分解为若干个子过程,使每个子过程与其他子过程并行进行的技术。本文主要介绍了诞生于云原生时代的流水线框架 Argo。 什么是流水线?在计算机...【详细内容】
2021-11-30  叼着猫的鱼    Tags:框架   点击:(21)  评论:(0)  加入收藏
TKinterThinter 是标准的python包,你可以在linx,macos,windows上使用它,你不需要安装它,因为它是python自带的扩展包。 它采用TCL的控制接口,你可以非常方便地写出图形界面,如...【详细内容】
2021-11-30    梦回故里归来  Tags:框架   点击:(26)  评论:(0)  加入收藏
前言项目中的配置文件会有密码的存在,例如数据库的密码、邮箱的密码、FTP的密码等。配置的密码以明文的方式暴露,并不是一种安全的方式,特别是大型项目的生产环境中,因为配置文...【详细内容】
2021-11-17  充满元气的java爱好者  博客园  Tags:SpringBoot   点击:(25)  评论:(0)  加入收藏
一、搭建环境1、创建数据库表和表结构create table account(id INT identity(1,1) primary key,name varchar(20),[money] DECIMAL2、创建maven的工程SSM,在pom.xml文件引入...【详细内容】
2021-11-11  AT小白在线中  搜狐号  Tags:开发框架   点击:(29)  评论:(0)  加入收藏
SpringBoot开发的物联网通信平台系统项目功能模块 功能 说明 MQTT 1.SSL支持 2.集群化部署时暂不支持retain&will类型消 UDP ...【详细内容】
2021-11-05  小程序建站    Tags:SpringBoot   点击:(55)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条