nuxt3引入element-plus的三种方法

我心飞翔 分类:vue

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>

回复

我来回复
  • 暂无回复内容