Nuxt3 plugins(插件) element plus 使用

原创

KID.

发布于 2023-11-02 11:02:07

1K0

发布于 2023-11-02 11:02:07

文章被收录于专栏：Coooooooooode！（前端）

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

plugins 使用

目录结构

|- plugins
    |-- definePlugin.ts

definePlugin.ts

// 导出的是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 中定义的方法不需要引入直接可以用。

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

element plus 引入 element plus官网

安装

npm install element-plus --save

使用

|- plugins
    |-- elementPlusPlugin.ts

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

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

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

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

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

element ui