choukin

V1

2022/07/28阅读:16主题:默认主题

[Nuxt 3] (十二) 项目目录结构 3

人如果有过一个朋友,即使快要死了,也值。我真高兴,有过一个狐狸朋友... ——《小王子》

插件目录

Nuxt 会自动读取并加载 plugins/中的文件。可以添加 .server.client 后缀的的文件名让插件只在服务器或客户端执行。

plugins/目录中的插件都会自动注册,所以你不需要单独在 nuxt.config中添加。

哪些文件会被注册

只有plugins/中顶层的文件(或者子目录中的index文件)会被注册为插件。

示例:

plugins
 | - myPlugin.ts
 | - myOtherPlugin
 | --- supportingFile.ts
 | --- componentToRegister.vue
 | --- index.ts

只有 myPlugin.tsmyOtherPlugin/index.ts 会被注册.

创建插件

插件只接收nuxtApp) 参数。

export default defineNuxtPlugin(nuxtApp => {
  // Doing something with nuxtApp
})

自动的辅助函数

如果你想给NuxtApp实例提供一个辅助函数,在返回对象中的provide 中添加函数。例如:

export default defineNuxtPlugin(() => {
  return {
    provide: {
      hello: (msg: string) => `Hello ${msg}!`
    }
  }
})

在其他文件中的使用方式:

<template>
  <div>
    {{ $hello('world') }}
  </div>
</template>

<script setup lang="ts">
// alternatively, you can also use it here
const { $hello } = useNuxtApp()
</script>

插件类型

如果你从插件中返回了自定义的辅助函数,它们会自动类型推导,你会发现它们会从usenuxtApp()返回是自动动类型推导,也可以在模版中使用。

如果你需要在另一个插件内部使用辅助函数,你可以调用 useNuxtApp() 来获得类型版本,但一般情况下,除非你确定插件的调用顺序,否则应该避免这种情况。

进阶

对于高级用例,你可以这样声明注入属性的类型:

declare module '#app' {
  interface NuxtApp {
    $hello (msg: string): string
  }
}

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $hello (msg: string): string
  }
}

export { }

Vue 插件

如果你想使用Vue 插件,例如vue-gtag,来添加GOOgle统计,标签,你可以使用Nuxt插件来实现。

有一个 开源的RFC 使得更容易实现这个功能nuxt/framework#1175

首先安装你想要的插件。

yarn add --dev vue-gtag-next

创建一个名字是 plugins/vue-gtag.client.js 的插件

import VueGtag from 'vue-gtag-next'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueGtag, {
    property: {
      id: 'GA_MEASUREMENT_ID'
    }
  })
})

Vue 指令

类似地,你可以在插件中注册一个自定义的Vue指令,例如:在plugins/directive.ts

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('focus', {
    mounted (el) {
      el.focus()
    },
    getSSRProps (binding, vnode) {
      // you can provide SSR-specific props here
      return {}
    }
  })
})

App 文件

app.vue文件是Nuxt 3 应用的主要组件。

基本用法

在Nuxt 3中,pages/目录是可选的。如果不存在pages/不存在,Nuxtt 不会引入vue-router依赖,当一个应用或落地页面不需要路由导航时非常有用。 With Nuxt 3, the pages/ directory is optional. If not present,

<template>
  <h1>Hello World!</h1>
</template>

和页面一起使用

如果你使用了 pages/目录,需要使用<NuxtPage>来展示页面:

<template>
  <div>
    <NuxtLayout>
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>

因为Nuxt3 在 <NuxtPage> 内部使用了Suspense,我们推荐使用唯一的根元素包裹它。

记住app.vue是Nuxt 应用的主要组件,你在它里添加的任何代码(JS 和 CSS)都会包含的每个页面中。

分类:

前端

标签:

Vue.js

作者介绍

choukin
V1