目录element-plus按需引入后ElMessage与ElLoading在页面使用按照官网按需引用element-plusElMessage与ElLoading使用问题解决找不到
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()],
}),
],
}
<script setup lang="ts">
const testMessage = () => {
ElMessage.success('1211')
}
</script>
<template>
<div>
<el-button type="primary" @click="testMessage">Primary</el-button>
</div>
</template>
此时ElMessage与ElLoading也是可用,当时vscode有会报错提示-----------》找不到名称“ElMessage”。ts(2304),我在tsconfig.JSON添加了配置依旧报错
1.手动引入ElMessage
<script setup lang="ts">
// 手动引入
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中引入对应样式
// 引入Elmessage和Elloading的CSS样式文件
import 'element-plus/theme-chalk/el-loading.css'
import 'element-plus/theme-chalk/el-message.css'
3.ElLoading同理
但背离了我们自动导入的初衷,所以推荐下面这种方式
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中手动导入ElMessage与ElLoading的样式了
因为element-plus更新频率很高,所以路径也有改变,可以试一下我下面的这个引用路径
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: element-plus按需引入后ElMessage与ElLoading在页面中的使用
本文链接: https://www.lsjlt.com/news/166658.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
一口价域名售卖能注册吗?域名是网站的标识,简短且易于记忆,为在线用户提供了访问我们网站的简单路径。一口价是在域名交易中一种常见的模式,而这种通常是针对已经被注册的域名转售给其他人的一种方式。
一口价域名买卖的过程通常包括以下几个步骤:
1.寻找:买家需要在域名售卖平台上找到心仪的一口价域名。平台通常会为每个可售的域名提供详细的描述,包括价格、年龄、流
443px" 443px) https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294.jpg https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294-768x413.jpg 域名售卖 域名一口价售卖 游戏音频 赋值/切片 框架优势 评估指南 项目规模
0