nuxt3引入element-plus的三种方法

1、全部引入

安装element-plus依赖

代码语言：javascript复制

npm install element-plus --save

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

在element-plus.ts文件中输入

代码语言：javascript复制

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样式

代码语言：javascript复制

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，不然报错

安装依赖

代码语言：javascript复制

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

在nuxt.config.ts文件中引入

代码语言：javascript复制

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）

代码语言：javascript复制

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,
    })
})

在页面上引入使用

代码语言：javascript复制

<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

安装依赖

代码语言：javascript复制

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

在nuxt.config.ts文件中引入

代码语言：javascript复制

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）

代码语言：javascript复制

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,
    })
})

在页面上引入使用

代码语言：javascript复制

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

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

typescript vue.js elementui

0 人点赞