共计 3774 个字符,预计需要花费 10 分钟才能阅读完成。
这篇文章整顿一下,nuxt 中 pages/layout/components/plugins 的相干应用。之前曾经手上应用过了,这次具体的看一下官网文档,加深了解。
目录构造
|--src
|--components --- 编写重复使用组件。|--layout --- 编写全局款式。|--pages --- 编写具体页面。|--plugins --- 编写须要的插件。
components
该 components 目录蕴含您的 Vue.js 组件。组件形成了页面的不同局部,能够重复使用并导入到页面、布局甚至其余组件中。
通过在 nuxt.config.js 文件中进行如下配置,能够间接应用组件,无需导入
export default {components: true}
|-- components/
|-- TheHeader.vue
|-- TheFooter.vue
<template>
<div>
<TheHeader />
<Nuxt />
<TheFooter />
</div>
</template>
援用时,须要与文件名雷同。
当 components 层级较多时的援用办法:
|--components
|--base
|--foo
|--CustomButton.vue
组件名称将基于其本人的门路目录和文件名。因而,该组件将是
<BaseFooCustomButton />
获取数据
components 获取数据的形式是:Nuxt 中的 fetch()。无奈应用 asyncData,因为 asyncData 办法会在组件(限于页面组件)每次加载之前被调用。
<script>
export default {async fetch({ store, params}) {let { data} = await axios.get('http://my-api/stars')
store.commit('setStars', data)
}
}
</script>
留神:无奈在外部应用 this 获取组件实例,fetch 是在组件初始化之前被调用
layout
编写全局布局,例如,侧边栏,导航栏。
|-- layout
|-- default.vue
default.vue 文件,会默认利用到所有未指定布局的页面。
援用导航栏,页脚组件:
<template>
<div>
<TheHeader />
<Nuxt />
<TheFooter />
</div>
</template>
也能够自定义导入须要的布局:
// X.vue
<script>
export default {
layout: 'blog',
// OR
layout (context) {return 'blog'}
}
</script>
layout 有个非凡的页面——error。尽管这个文件放在 layouts 文件夹中,但它应该被视为一个页面。
<template>
<div class="container">
<h1 v-if="error.statusCode === 404">!!!!!!!!!!!!!! 啊呀,页面找不到了 </h1>
<h1 v-else>An error occurred</h1>
<h2> 这是 error.message {{error.message}}</h2>
<h2> 这是 error.statusCode {{error.statusCode}}</h2>
<NuxtLink to="/">Home page</NuxtLink>
</div>
</template>
<script>
export default {
layout: 'errorLayout',
props: ['error'] // you can set a custom layout for the error page
}
</script>
接管 error 参数。在全局的 api 接口调用,处理错误信息。
export default function ({app, $axios, error},inject) {const API = {};
API.getGameList = function () {return $axios.$get('/api/apps.json').catch(e => {error({ statusCode: e.response.status, message: e.response.statusText})
})
};
app.api = API;
inject('api',API);
}
这样,就能捕捉接口异样信息,跳转到 error 页面。
pages
page 蕴含所有的目录和路由。nuxt 会依据文件名主动生成路由,也可依据接管的参数生成动静页面,接管的参数以下划线结尾。如:_slug
|-- pages
|-- _slug
|--index.vue
|-- game
|--index.vue
<nuxt-link
:to="{name:'slug', params: { slug: item.slug} }"
>
</nuxt-link>
<nuxt-link :to="/game" >
</nuxt-link>
_slug/index.vue 文件接管参数
<template>
<h1>{{this.slug}}</h1>
</template>
<script>
export default {async asyncData({ params}) {
const slug = params.slug // When calling /abc the slug will be "abc"
return {slug}
}
}
</script>
page 获取数据的办法:
asyncData. 这个钩子只能放在页面组件上。与 不同的是 fetch,此钩子在客户端渲染期间不会显示加载占位符:相同,此钩子会阻止路由导航,直到解决为止,如果失败则显示页面谬误。
fetch(Nuxt 2.12+)。这个钩子能够放在任何组件上,并提供渲染加载状态(在客户端渲染期间)和谬误的快捷方式。
在 fetch 里能够应用 this。this 的数据,须要先在 data 中定义。
export default {asyncData(context){
const tempParams = context.params;
return {tempParams}
},
data() {
return {iframeShow: false}
},
async fetch({ params} ) {this.iframeShow = await params.iframeShow;}
}
page 其余配置
— 文档 head 信息,
— layout 布局,
— 加载 loading,
— 路由过渡动画 transition,
— 中间件 middleware:定义此页面的中间件。中间件将在出现页面之前被调用。
— 滚到顶部 scrollToTop,
— 监听字符串变动 watchQuery:能够设置查问字符串的监督程序,
如:watchQuery:[‘sq’],<nuxt-link to="/test/abc?sq=1">test</nuxt-link>
将会监听到 sq 的变动,将调用所有组件办法(asyncData,fetch(context),validate,layout 等)。监督默认状况下处于禁用状态,以进步性能。如果要为所有查问字符串设置监督程序,请设置 watchQuery: true。
— key:key 属性赋值到 <router-view :key="$route.path" />
,这对于在动静页面和不同门路中进行转换很有用。不同的 key 会使页面组件从新渲染。
— 配置 Configuration:能够重命名以后 page 的名字
— 疏忽页面 Ignoring pages,
在文件名后面增加 ‘-‘,如:pages/-about.vue,如果您想疏忽页面以便它们不蕴含在生成的 router.js 文件中,那么您能够通过在它们后面加上 – 来疏忽它们。about.vue 将被疏忽。
export default {
middleware: 'auth'
layout: 'gamePlay',
head() {
return {title: `New head`,}
},
loading: false,
transition: 'fade',
scrollToTop: true,
watchQuery: ['sq'],
key (route) {return route.fullPath},
dir: {
// Rename `pages` directory to `routes`
pages: 'routes'
}
}
plugins
该目录文件,蕴含想要在 vue.js 实例化之前的所有 js 插件。
例如,elementUI 援用,之前介绍的 axios 封装,国际化文件。
最重要的是,须要在 nuxt.config.js 里配置你须要应用的插件。
module.exports = {modules: ['@nuxtjs/axios'],
plugins: [
'~/plugins/element-ui',
'~/plugins/api',
{src: '~plugins/vueLazyLoad', ssr: false},
'~/plugins/gtag',
'~/plugins/global',
'~/plugins/i18n'
],
}
最初,就能够间接在具体的页面中应用了。
附带一张 nuxt 申明周期图
出处:nuxt 的生命周期
以上就是我整顿的 pages/layout/components/plugins 相干内容了。如有不足之处,心愿各位能多多指教。