-
API loadingIndicator属性教程
所属栏目:[教程] 日期:2023-04-14 热度:8509
在SPA模式下运行Nuxt.js时,第一页加载时没有来自服务器端的内容。因此,我们可能会显示一个加载进度,而不是在页面加载时显示空白页面。 此属性可以有3种不同的类型:string或false或object。如果提供了string值,则[详细]
-
API modern属性
所属栏目:[教程] 日期:2023-04-14 热度:8589
此功能的想法来自 vue-cli modern mode
类型: String 或 Boolean
'client': 构建两个版本的包:同时为现代浏览器打包提供 <link rel ="modulepreload"> 。每个正确解析模块类型的现代浏览器都会加载现[详细] -
API CSS配置介绍
所属栏目:[教程] 日期:2023-04-14 热度:8686
在 Nuxtjs 里配置全局的 CSS 文件、模块、库。 (每个页面都会被引入)
如果要使用 sass 就必须要安装 node-sass和sass-loader 。
npm install --save-dev node-sass sass-loader
在 nuxt.conf.js中,添加要使用[详细] -
API loading属性分析
所属栏目:[教程] 日期:2023-04-14 热度:3998
loading属性为您提供了禁用特定页面上的默认加载进度条的选项。我们的目标是通过使用这些工具,帮助您更好地管理数据,从而提高效率。
类型: Boolean (默认: true)
默认情况下,Nuxt.js使用自己的组件来显示路由[详细] -
API middleware属性浅谈
所属栏目:[教程] 日期:2023-04-14 热度:9185
讲解关于API: middleware属性的使用例子。
类型: String 或 Array
数组元素类型: String
在应用中的特定页面设置中间件
例子:
pages/secret.vue
<template>
<h1>Secret page</h1>
</template>
[详细] -
API scrollToTop属性介绍
所属栏目:[教程] 日期:2023-04-14 热度:9461
scrollToTop 属性用于控制页面渲染前是否滚动至页面顶部。
类型: Boolean (默认值: false)
默认情况下,从当前页面切换至目标页面时,Nuxt.js 会让目标页面滚动至顶部。但是在嵌套子路由的场景下,Nuxt.js 会保[详细] -
API transition属性分析
所属栏目:[教程] 日期:2023-04-14 热度:1569
Nuxt.js 使用 Vue.js 的<transition>组件来实现路由切换时的过渡动效。
类型: String 或 Object 或 Function
如果想给某个页面自定义过渡特效的话,只要在该页面组件中配置 transition 字段即可:
export de[详细] -
API validate方法介绍
所属栏目:[教程] 日期:2023-04-14 热度:5890
Nuxt.js 可以让你在动态路由对应的页面组件中配置一个校验方法用于校验动态路由参数的有效性。
类型: Function
validate({ params, query }) {
return true // 如果参数有效
return false // 参数无效,N[详细] -
API watchQuery属性分析
所属栏目:[教程] 日期:2023-04-14 热度:742
监听参数字符串更改并在更改时执行组件方法 (asyncData, fetch, validate, layout, ...)
类型: Boolean or Array (默认: [])
使用watchQuery属性可以监听参数字符串的更改。 如果定义的字符串发生变化,将调用所[详细] -
API <nuxt>组件教程
所属栏目:[教程] 日期:2023-04-14 热度:6498
<nuxt> 组件只适用于在布局中显示页面组件(即非布局内容)。
例子 (layouts/default.vue):
<template>
<div>
<div>页头</div>
<nuxt/>
<div>页脚</div>
</div>
</template>
Props:[详细] -
API <nuxt-child>组件介绍
所属栏目:[教程] 日期:2023-04-14 热度:3578
<nuxt-child> 组件用于显示嵌套路由场景下的页面内容。
例如:
-| pages/
---| parent/
------| child.vue
---| parent.vue
上面的目录树结构会生成下面这些路由配置:
[
{
path: '/parent[详细] -
API <nuxt-link>组件浅析
所属栏目:[教程] 日期:2023-04-14 热度:9149
<nuxt-link> 组件用于在页面中添加链接至别的页面。
目前 <nuxt-link> 的作用和 <router-link> 一致,推荐阅读 Vue路由文档 来了解它的使用方法。
例如 (pages/index.vue):
<template>
<div>
<h1>[详细] -
API 构建配置浅谈
所属栏目:[教程] 日期:2023-04-14 热度:9439
Nuxt.js 允许你根据服务端需求,自定义 webpack 的构建配置。
Nuxt.js 使用 webpack-bundle-analyzer 分析并可视化构建后的打包文件,你可以基于分析结果来决定如何优化它。
如果是 Object 类型, 可以移步 这[详细] -
Nuxt.js 资源文件分析
所属栏目:[教程] 日期:2023-04-14 热度:31
默认情况下 Nuxt 使用 vue-loader、file-loader 以及 url-loader 这几个 Webpack 加载器来处理文件的加载和引用。对于不需要通过 Webpack 处理的静态资源文件,可以放置在 static 目录中。
Webpack 构建
默认情[详细] -
Nuxt.js 插件运用
所属栏目:[教程] 日期:2023-04-14 热度:9952
Nuxt.js允许您在运行Vue.js应用程序之前执行js插件。这在您需要使用自己的库或第三方模块时特别有用。
需要注意的是,在任何 Vue 组件的生命周期内, 只有 beforeCreate 和 created 这两个方法会在 客户端和服务端[详细] -
Nuxt.js 模块介绍
所属栏目:[教程] 日期:2023-04-14 热度:8838
模块是Nuxt.js扩展,可以扩展其核心功能并添加无限的集成。
在使用Nuxt开发应用程序时,您很快就会发现框架的核心功能还不够。 Nuxt可以使用配置选项和插件进行扩展,但是在多个项目中维护这些自定义是繁琐、重复[详细] -
Vuex 状态树分析
所属栏目:[教程] 日期:2023-04-14 热度:7514
对于每个大项目来说,使用状态树 (store) 管理状态 (state) 十分有必要。这就是为什么 Nuxt.js 内核实现了 Vuex。
使用状态树
Nuxt.js 会尝试找到src目录(默认是应用根目录)下的 store 目录,如果该目录存在[详细] -
Nuxt.js 开发工具介绍
所属栏目:[教程] 日期:2023-04-14 热度:77
测试是 Web 应用开发过程中不可获缺的工作。
Nuxt.js 尽量帮助你简化这部分工作。
端对端测试
ava 是一个很强大的 JavaScript 测试框架,结合 jsdom,我们就可以轻松地给 nuxt 应用进行端对端测试。
首先[详细] -
什么是Nuxt.js 命令
所属栏目:[教程] 日期:2023-04-14 热度:9136
Nuxt.js 提供了一系列常用的命令, 用于开发或发布部署。
命令 描述
nuxt 启动一个热加载的Web服务器(开发模式) localhost:3000。
nuxt build 利用webpack编译应用,压缩JS和CSS资源(发布用)。[详细] -
API fetch方法介绍
所属栏目:[教程] 日期:2023-04-14 热度:7671
fetch 方法用于在渲染页面前填充应用的状态树(store)数据, 与 asyncData 方法类似,不同的是它不会设置组件的数据。
如果页面组件设置了 fetch 方法,它会在组件每次加载前被调用(在服务端或切换至目标路由之[详细] -
API head方法运用
所属栏目:[教程] 日期:2023-04-14 热度:1026
Nuxt.js 使用了 vue-meta 更新应用的 头部标签(Head) 和 html 属性。
类型: Object 或 Function
使用 head 方法设置当前页面的头部标签。
在 head 方法里可通过 this 关键字来获取组件的数据,你可以利用页面[详细] -
API head方法介绍
所属栏目:[教程] 日期:2023-04-13 热度:1229
Nuxt.js 使用了 vue-meta 更新应用的 头部标签(Head) 和 html 属性。
类型: Object 或 Function
使用 head 方法设置当前页面的头部标签。
在 head 方法里可通过 this 关键字来获取组件的数据,你可以利用页[详细] -
API asyncData方法介绍
所属栏目:[教程] 日期:2023-04-13 热度:718
你可能想要在服务器端获取并渲染数据。Nuxt.js添加了asyncData方法使得你能够在渲染组件之前异步获取数据。
类型: Function
asyncData方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由[详细] -
Nuxt.js 异步数据浅析
所属栏目:[教程] 日期:2023-04-13 热度:1245
Nuxt.js 扩展了 Vue.js,增加了一个叫 asyncData 的方法,使得我们可以在设置组件的数据之前能异步获取或处理数据。
asyncData 方法
asyncData方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或[详细] -
Nuxt.js 视图介绍
所属栏目:[教程] 日期:2023-04-13 热度:6917
Nuxt.js 允许你扩展默认的布局,或在 layout 目录下创建自定义的布局。
默认布局
可通过添加 layouts/default.vue 文件来扩展应用的默认布局。
提示: 别忘了在布局文件中添加 <nuxt/> 组件用于显示页面的主体[详细]