前言
首先我们要知道插件是在plugins文件夹下定义的,让我们开始编写吧
自定义插件
需要在根目录下创建
plugins文件夹,nuxt会自动识别引用
这里我创建了plugins文件夹—》testplug.ts
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin(()=>{
return{
provide:{
pengke:()=> '认准碰磕Study'
}
}
})
使用该定义的pengke
<script lang="ts" setup>
const {$pengke} = useNuxtApp()
console.log($pengke)
</script>
这样就能使用定义好的pengke了
UI组件库
每个框架都需要用到第三方组件库，这里我演示使用
element-ui-plus
安装
npm install element-plus --save
引入
在plugins 文件夹下创建/element-plus.ts
import { defineNuxtPlugin } from '#app'
import ElementPlus from 'element-plus/dist/index.full'
export default defineNuxtPlugin(nuxtApp=>{
nuxtApp.vueApp.use(ElementPlus)
})
这样elementplus引入了但样式还没引入,在app.vue根文件下全局引入
<style>
@import 'element-plus/dist/index.css';
</style>
这样就实现引入成功了,开始使用吧文章来源：https://www.toymoban.com/news/detail-506059.html
使用
<div>
<el-button type="success" @click="count--">-</el-button>
1
<el-button type="success" @click="count++">+</el-button>
</div>
成功使用，完结~文章来源地址https://www.toymoban.com/news/detail-506059.html
到了这里，关于Nuxt3最终篇【自定义插件与UI组件库的使用】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
