一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第16天，点击查看活动详情。

Nuxt3-学习之路 16，插件-vue实例

引言

本系列会以我的一个理解，来介绍并开始学习 Nuxt3。

中间会插入自己所联系到的乱七八糟的 知识点。

插件

上一节主要是 defineNuxtPlugin 的简单使用，这里主要通过直接用 defineNuxtPlugin 暴露出来的 vue 实例来挂载引入一些 UI组件库.

目录结构依然是在 pulgins 下面创建相关引入文件

vue实例

引入 element-plus

首先进行 npm 或者 yarn 方式引入

npm install element-plus --save

或者

yarn add element-plus

安装完毕后，我们创建文件，目录结构为

| plugins/
--| element-plugin.ts
| app.vue

首先通过 import 引入我们的 ElementPlus

通过 defineNuxtPlugin 里面的 nuxtApp 的 vue 实例 vueApp 来进行 use 的一个挂载使用

import ElementPlus from 'element-plus/dist/index.full'
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(ElementPlus)
})

挂载好了之后，我们还需要在 app.vue 里面引入 ElementPlus 的 css 的样式文件，注意需要在 style 里面引入

@import 'element-plus/dist/index.css';

这样我们就引入成功了，并且全局挂载好了插件（注意不是按需引入），我们接下来在根路由 /pages/index.vue 中进行使用一下。

注意是不需要 import 引入 ElementPlus 的任何东西，会自动帮我们引入好。

    <div>
      <h3>使用ElementPlus</h3>
      <el-row class="mb-4">
        <el-button>Default</el-button>
        <el-button type="primary">Primary</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
        <el-button>中文</el-button>
      </el-row>
    </div>