nuxt3引入element-plus的三种方法

标签：nuxt3 element unplugin plus 引入 import css

1、全部引入

安装element-plus依赖

npm install element-plus --save

在nuxt3项目中plugins下新建一个element-plus.client.ts文件

 在element-plus.client.ts文件中输入

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

然后在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()]
            })
        ],
    }
})

在页面上引入使用

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

在页面上引入使用

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

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

 

标签：nuxt3,element,unplugin,plus,引入,import,css
From： https://www.cnblogs.com/lovewhatIlove/p/16871927.html