nuxt3引入element-plus的三种方法

你的明明呐丶

发布于 2023-01-01 09:49:14

3.2K1

发布于 2023-01-01 09:49:14

1、全部引入

安装element-plus依赖

npm install element-plus --save

在nuxt3项目中plugins下新建一个element-plus.client.ts文件（注意：默认必须在 plugins 下新建配置文件，这是“约定”，详情见官网）关于为什么要加 .client 感兴趣请看：《前端渲染CSR和SSR的结合使用分析》）

在element-plus.ts文件中输入

import ElementPlus from 'element-plus'
import { ID_INJECTION_KEY } from 'element-plus';
export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(ElementPlus)
    nuxtApp.vueApp.provide(ID_INJECTION_KEY, {
        prefix: Math.floor(Math.random() * 10000),
        current: 0,
    })
})

然后在nuxt.config.ts文件中引入UI样式

export default defineNuxtConfig({
   ...
    css: ['element-plus/dist/index.css'],
   ...
})

就可以在页面中引入element-plus组件了

2、按需引入

手动导入的话有两种方法：1、unplugin-vue-components 2、unplugin-element-plus

2.1、unplugin-vue-components

nuxt3目前不支持自动按需引入，需要在页面中import，不然报错

安装依赖

npm install element-plus --save
npm install unplugin-vue-components -D

在nuxt.config.ts文件中引入

import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineNuxtConfig({
    css: ['element-plus/dist/index.css'],
    vite: {
        plugins: [
            Components({
                dts: true,
                resolvers: [ElementPlusResolver()]
            })
        ],
    }
})

在plugins下新建一个element-plus.ts文件（在SSR下elementui需要配置一个provide）

import { ID_INJECTION_KEY } from 'element-plus';
export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.provide(ID_INJECTION_KEY, {
        prefix: Math.floor(Math.random() * 10000),
        current: 0,
    })
})

在页面上引入使用

<script setup lang='ts'>
import {
    ElButton
} from "element-plus";
</script>

<template>
    <div>
        <el-button>Default</el-button>
    </div>
</template>

2.2、unplugin-element-plus

来自element-plus团队的示例：https://github.com/element-plus/element-plus-nuxt-starter

安装依赖

npm install element-plus --save
npm install unplugin-element-plus -D

在nuxt.config.ts文件中引入

import ElementPlus from 'unplugin-element-plus/vite'
export default defineNuxtConfig({
    css: ['element-plus/dist/index.css'],
    build: {
        transpile: ['element-plus/es'],
    },
    vite: {
        plugins: [
            ElementPlus()
        ],
    }
})

在plugins下新建一个element-plus.ts文件（在SSR下elementui需要配置一个provide）

import { ID_INJECTION_KEY } from 'element-plus';
export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.provide(ID_INJECTION_KEY, {
        prefix: Math.floor(Math.random() * 10000),
        current: 0,
    })
})

在页面上引入使用

<script setup lang='ts'>
import {
    ElButton
} from "element-plus";
</script>

<template>
    <div>
        <el-button>Default</el-button>
    </div>
</template>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

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

typescript