nuxt「建议收藏」

nuxt「建议收藏」Nuxt.js是一个基于Vue.js的通用应用框架。通过对客户端/服务端基础架构的抽象组织,Nuxt.js主要关注的是应用的 UI渲染。Nuxt.js预设了利用Vue.js

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。

Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

作为框架,Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性,例如异步数据加载、中间件支持、布局支持等。

特性

  • 基于 Vue.js
  • 自动代码分层
  • 服务端渲染
  • 强大的路由功能,支持异步数据
  • 静态文件服务
  • ES2015+ 语法支持
  • 打包和压缩 JS 和 CSS
  • HTML 头部标签管理
  • 本地开发支持热加载
  • 集成 ESLint
  • 支持各种样式预处理器: SASS、LESS、 Stylus 等等
  • 支持 HTTP/2 推送、

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

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

npx create-nuxt-app <项目名>

启动项目:

 cd <project-name>
 npm run dev
  • 别名

别名 目录
~ 或 @ srcDir
~~ 或 @@ rootDir

 

 

 

 

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

提示: 在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_image.png 和 ~/static/your_image.png方式。

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

路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

要在页面之间使用路由,我们建议使用<nuxt-link> 标签。

假设 pages 的目录结构如下:

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

那么,Nuxt.js 自动生成的路由配置如下:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

动态路由

在 Nuxt.js 里面定义带参数的动态路由,需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。


路由参数校验

validate

嵌套路由

可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。

创建内嵌子路由,你需要添加一个 Vue 文件,同时添加一个与该文件同名的目录用来存放子视图组件。

Warning: 别忘了在父组件(.vue文件) 内增加 <nuxt-child/> 用于显示子视图内容。

命名视图

要渲染命名视图,您可以在布局(layout) / 页面(page)中使用 <nuxt name="top"/> 或 <nuxt-child name="top"/> 组件。要指定页面的命名视图,我们需要在nuxt.config.js文件中扩展路由器配置:

export default {
  router: {
    extendRoutes (routes, resolve) {
      const index = routes.findIndex(route => route.name === 'main')
      routes[index] = {
        ...routes[index],
        components: {
          default: routes[index].component,
          top: resolve(__dirname, 'components/mainTop.vue')
        },
        chunkNames: {
          top: 'components/mainTop'
        }
      }
    }
  }
}

它需要使用两个属性 components 和 chunkNames 扩展路由。此配置示例中的命名视图名称为 top 。

中间件

中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。

每一个中间件应放置在 middleware/ 目录。文件名的名称将成为中间件名称(middleware/auth.js将成为 auth 中间件)。

一个中间件接收 context 作为第一个参数:

中间件执行流程顺序:

  1. nuxt.config.js
  2. 匹配布局
  3. 匹配页面
export default function(context) {}

context是nuxt中最大的参数,可以获取所有的东西,请求参数,store
//应用场景:
    /*
    但凡的请求过程中需要的公共事务,就可以放在全局路由改变的中间件来完成
    nuxt.config.js
    */
插件
axios
nuxt中使用axios
安装
npm i -S @nuxtjs/axios @nuxtjs/proxy
nuxt.config.js
{
    modules:[
        '@nuxt/axios',
        '@nuxt/proxy'
    ],
    proxy:[//跨域代理
       ['/api/dog',{
            target:'htts://dog.ceo/',
        pathRewrite:{
            '^/api/dog':'/api/breads/image/random'
                    }
        }
    
    ]
]
}                

url-loader 小文件base-64化能有效减少HTTP请求数。
在任何 Vue 组件的生命周期内, 只有 beforeCreate 和 created 这两个方法会在 客户端和服务端被调用。其他生命周期函数仅在客户端被调用。
asyncData可以在服务器端使用,也可以在客户端使用,在客户端运行就相当于发送ajax请求,在服务端运行就发送服务端请求,
必须要与data属性一起使用,会自动合并与data的属性,相当与created
注意:由于asyncData方法是在组件 初始化 前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象。
在服务器端和客户端都可以使用生命周期钩子:created beforeCreated


nuxt默认服务器端渲染,可以配置spa的模式启动:
在package.json中scripts中添加:
'start-spa':'nuxt start --spa' npm run start-spa































版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/168210.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 简述控制反转ioc_什么是IoC控制反转

    简述控制反转ioc_什么是IoC控制反转静态类的使用是一个有争议的话题,有人甚至提倡不要在类的名称上使用作用域限定符。关于静态特性争论的焦点在于一个被称为IoC控制反转的设计原则。IoC这个设计原则试图在面向对象编程中去掉所有相互依赖的现象。这个原则对于复杂的系统来说是很重要的。它使得对象具有更好的多态性和封装性。相互依赖的现象越少,就越容易单独测试某个组件。静态类与IoC之间的问题在于静态访问特性,这个特性从本质上来说,定义了两个类之…

  • Oracle PL/SQL编程之四: 把游标说透「建议收藏」

    Oracle PL/SQL编程之四: 把游标说透「建议收藏」Oracle PL/SQL编程之四:把游标说透(不怕做不到,只怕想不到)本篇主要内容如下:4.1 游标概念4.1.1 处理显式游标4.1.2 处理隐式游标4.1.3 关于 NO_DATA_FOUND 和 %NOTFOUND的区别4.1.4  使用游标更新和删除数据4.2 游标变量4.2.1  声明游标变

  • 上海java软件工程师的工资待遇[通俗易懂]

    上海java软件工程师的工资待遇[通俗易懂]想要当好一名软件开发工程师,在学习之前,你首先必须要明白什么是软件。如果连软件是什么都不知道,你怎么能学好呢。  软件是一系列按照特定顺序组织的计算机数据和指令的集合。一般来讲软件被划分为编程语言、系统软件、应用软件和介于这两者之间的中间件。其中系统软件为计算机使用提供最基本的功能,但是并不针对某一特定应用领域。而应用软件则恰好相反,不同的应用软件根据用户和所服务的领域提供不同的功能。

  • AD域基础

    AD域基础文章目录AD域基础1.什么是AD域2.AD域和工作组的区别2.1工作组特点及优缺点2.2AD域特点及优缺点3.为什么要做AD域管理4.AD域可以做什么AD域基础1.什么是AD域activedirectory活动目录,指一组服务器和工作站的集合,域中的目录是始终呈激活可用,动态更新的状态域将计算机、用户的账号密码集中放在一个数据库内,使得用户只使用一个账号和密码就能够访问网络中的…

  • 深度学习(十五)基于DCNN的人脸特征点定位-CVPR 2013

    深度学习(十五)基于DCNN的人脸特征点定位-CVPR 2013基于DCNN的人脸特征点定位原文地址:http://blog.csdn.net/hjimce/article/details/49955149作者:hjimce一、相关理论本篇博文主要讲解2013年CVPR的一篇利用深度学习做人脸特征点定位的经典paper:《DeepConvolutionalNetworkCascadeforFacialPoint

  • ping命令详解 ping命令入门详解

    ping命令详解 ping命令入门详解在这个时代,科技越来越发达,网络已经越来越成为人们不可缺少的一部分。计算机也已经是很多学校的课程了,因为计算机技术是非常有技术性的专业,它其中涉及到很多专业知识,需要通过学习才能掌握。今日小编就为大家介绍一个计算机的命令,它叫做Ping,这边介绍一下它的入门知识,主要是关于ping连接和命令方面的介绍。  1、Ping的基础知识  ping命令相信大家已经再熟悉不过了,但是能把ping的功能发…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号