Nuxt3 plugins(插件) element plus 使用

约定 在plugins文件夹中的ts文件内容会自动在项目启动时执行。

plugins 使用

目录结构

代码语言：txt复制

|- plugins
    |-- definePlugin.ts

definePlugin.ts

代码语言：txt复制

// 导出的是defineNuxtPlugin，参数为一个回调函数
export default defineNuxtPlugin((nuxtApp) => {
  console.log(nuxtApp) 
  // 打印出的nuxtApp包含了很多 组件里的内容，其中包裹vueapp等。可以用来挂载我们想用的组件库。
  // 其中provide 可以用来定义公共方法。
  return {
    provide:{
      // functionName 是定义的定义公共方法名称，
      // 可以在项目内，通过$functionName的方式调用方法
       functionName (something) => {
        return something * 1000
      }
    }
  }
})

使用定义的公共方法 xxx.vue

要我说，如果要定义全局公共方法不如在composables中创建文件，定义方法好用。

plugin中的公共方法还需要引入，而composables 中定义的方法不需要引入直接可以用。

代码语言：txt复制

<script setup>
const { $functionName }  = useNuxtApp() // 引入后即可在页面中使用
</script>

element plus 引入 element plus官网

安装

代码语言：txt复制

npm install element-plus --save

使用

代码语言：txt复制

|- plugins
    |-- elementPlusPlugin.ts

elementPlusPlugin.ts 按照官网方式引用，在plugin中挂载

代码语言：txt复制

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(ElementPlus)
})

这时在项目中直接使用element组件接就可以了

elementui nuxt.js nuxtjs3nuxt+elementplus nuxt3 nuxtjs elementplus

1 人点赞