vue3按需导入element-plus后使用ElMessage报错或样式丢失
vue3按需导入element-plus后使用ElMessage报错或样式丢失
·
在vue项目中已经自动导入element-plus,但是直接使用ElMessage时编译会报错。
async function userLogin(): Promise<void> {
const response = await login(data.ruleForm)
if(response.code === 200) {
router.push('/home')
} else {
ElMessage.error(res.data.msg)
}
}
编译报错:
提示进行修改:
根据提示的解决方案,在前面导入ElMessage,这样会出现样式丢失:
样式丢失的原因是:手动导入和按需导入冲突了。
如果去掉import会报错,说明是eslint的问题。
解决方案:去掉import,修改eslint配置
// vue.config.js中修改unplugin-auto-import的配置
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [
AutoImport({
// AutoImport 增加 eslintrc ,自动生成 .eslintrc-auto-import.json 文件
eslintrc: {
enabled: true
},
resolvers: [ElementPlusResolver()],
}),
// ...
]
}
})
// .eslintrc.js的extends中增加'./.eslintrc-auto-import.json',rules中添加'no-undef': 0
module.exports = {
// ...
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended',
'./.eslintrc-auto-import.json'
],
rules: [
// ...
'no-undef': 0
]
}
// tsconfig.json的include中增加"./auto-imports.d.ts"
{
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx",
"./auto-imports.d.ts"
, "src/mock/user.js" ],
}
最终效果:
更多推荐
已为社区贡献7条内容
所有评论(0)