前言
大家好，我是村长，欢迎关注我的公众号村长学前端和B站Young村长
上一篇写了Nuxt3状态共享，本篇我们研究nuxt3的插件系统。通过插件系统，我们可以获取nuxt实例以及vue实例，这样我们有机会扩展nuxt或vue，比如引入一个UI库。
plugins目录
Nuxt3会自动读取plugins目录下的文件并加载它们。我们可以在文件名上使用.server或者.client前缀使他们仅作用于服务端或者客户端。
创建插件
使用defineNuxtPlugin()注册一个插件：
import { defineNuxtPlugin } from '#app'
// 唯一的参数是nuxt实例
export default defineNuxtPlugin(nuxtApp => {
// Doing something with nuxtApp
})
- 1.
- 2.
- 3.
- 4.
- 5.
插件用例：自动提供帮助方法
一个常见应用是给NuxtApp实例提供一些额外的帮助方法，我们可以通过编写一个插件，返回一个对象，在里面设置providekey，比如：
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin(() => {
return {
provide: {
hello: () => 'world'
}
}
})
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
使用这个helper，index.vue：
// 会自动加上$前缀
const { $hello } = useNuxtApp();
console.log($hello())
- 1.
- 2.
- 3.
插件用例：访问Vue实例
如果想要扩展Vue，我们通常要访问Vue实例，引入Vue插件。在nuxt3中可以通过插件访问nuxtApp.vueApp.use(xxx)做到。
我们引入vue-devui试一下，前面我们曾经试图自动导入失败了，这里我们手动导入：
npm i vue-devui
- 1.
创建一个插件vue-devui-plugin.ts：
import { defineNuxtPlugin } from "#app";
import { Button } from "vue-devui";
import 'vue-devui/button/style.css'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Button);
});
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
使用组件测试一下：
<d-button>按钮</d-button>
- 1.
扩展
引入其他组件库尝试结果：
- naive-ui按官方方式在SFC中直接使用组件 引入就报错，参见：https://github.com/TuSimple/naive-ui/issues/1427又找到了这个回答：https://github.com/TuSimple/naive-ui/issues/636#issuecomment-945990935不过这个解决方案关闭了vite，不是我喜欢的风格，仅供大家可以参考!
import { NButton } from 'naive-ui'
- 1.
<n-button>button</n-button>
- 1.
- vant是可以的，不过暂时不知道样式如何按需引入，编写如下插件：可以看一下有赞官方有计划做一个next3+vant的demo
import { defineNuxtPlugin } from "#app";
import { Button } from 'vant';
import 'vant/lib/index.css'
// 这里如果引入 vant/lib/button/index.css是没有效果的
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Button)
});
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- element-plus官方有个starter项目：
https://github.com/element-plus/element-plus-nuxt-starter
只可惜也是全量引入，按需引入没交代，也明确了自动引入暂时支持不了。
配套视频
我专门录制了Nuxt3从入门到实战系列视频，爱看视频学习的小伙伴不要错过!
https://space.bilibili.com/480140591/channel/seriesdetail?sid=456250
Young村长的个人空间-哔哩哔哩：https://b23.tv/rfg5t64
