快捷導(dǎo)航

element-plus按需引入后ElMessage與ElLoading在頁(yè)面中的使用

更新時(shí)間：2022年09月02日 10:50:09 作者：你的微笑、暖暖的

這篇文章主要介紹了element-plus按需引入后ElMessage與ElLoading在頁(yè)面中的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

element-plus按需引入后ElMessage與ElLoading在頁(yè)面使用

按照官網(wǎng)按需引用element-plus

pnpm install element-plus
pnpm add -D unplugin-vue-components unplugin-auto-import

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default {
? plugins: [
? ? // ...
? ? AutoImport({
? ? ? resolvers: [ElementPlusResolver()],
? ? }),
? ? Components({
? ? ? resolvers: [ElementPlusResolver()],
? ? }),
? ],
}

ElMessage與ElLoading使用問(wèn)題

<script setup lang="ts">
? const testMessage = () => {
? ? ElMessage.success('1211')
? }
</script>

<template>
? <div>
? ? <el-button type="primary" @click="testMessage">Primary</el-button>
? </div>
</template>

此時(shí)ElMessage與ElLoading也是可用，當(dāng)時(shí)vscode有會(huì)報(bào)錯(cuò)提示-----------》找不到名稱“ElMessage”。ts(2304)，我在tsconfig.json添加了配置依舊報(bào)錯(cuò)

解決找不到名稱“ElMessage”報(bào)錯(cuò)

1.手動(dòng)引入ElMessage

<script setup lang="ts">
? // 手動(dòng)引入
? import { ElMessage } from 'element-plus'
? const testMessage = () => {
? ? ElMessage.success('1211')
? }
</script>

<template>
? <div class="bg-light-900 flex justify-center">
? ? <el-button type="primary" @click="testMessage">Primary</el-button>
? ? <Test />
? </div>
</template>

2.在main.ts中引入對(duì)應(yīng)樣式

// 引入Elmessage和Elloading的css樣式文件
import 'element-plus/theme-chalk/el-loading.css'
import 'element-plus/theme-chalk/el-message.css'

3.ElLoading同理

雖然在main.ts中引入可以解決

但背離了我們自動(dòng)導(dǎo)入的初衷，所以推薦下面這種方式

pnpm add vite-plugin-style-import consola -D

// vite.config.ts
import {
? createStyleImportPlugin,
? ElementPlusResolve,
} from 'vite-plugin-style-import'
export default {
? plugins: [
? ? // ...
? ? createStyleImportPlugin({
? ? ? resolves: [ElementPlusResolve()],
? ? ? libs: [
? ? ? ? {
? ? ? ? ? libraryName: 'element-plus',
? ? ? ? ? esModule: true,
? ? ? ? ? resolveStyle: (name: string) => {
? ? ? ? ? ? return `element-plus/theme-chalk/${name}.css`
? ? ? ? ? },
? ? ? ? },
? ? ? ]
? ? }),
? ],
}

這樣配置后我們就不用在mian.js中手動(dòng)導(dǎo)入ElMessage與ElLoading的樣式了