Element-Plus 学习笔记一-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element-Plus 学习笔记一。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

这几天在学vue3, 用Element-plus 加 vue3 搭了个框架，在这里记录一下项目搭建中遇到的问题。

1、使用 Element-plus 的 icon 图标，显示不出来

首先，用命令行中安装 Element-plus 的图标：

　　npm install @element-plus/icons-vue --save

然后，在 main.js 中进行全局注册，添加以下代码：

import * as ElementIcon from '@element-plus/icons-vue' 

//全局导入plus图标
for(let iconName in ElementIcon)
{
    app.component(iconName,ElementIcon[iconName])
}

　最后，在画面上使用图标，需要套一层 template, 否则显示不出来

                    <el-input size="large" clearable v-model="ruleForm.username" placeholder="请输入用户名" >
                        <template #prefix>
                            <el-icon>
                                <UserFilled />
                            </el-icon>
                        </template>
                    </el-input>

2.修改 Element-Plus 主题颜色

参考地址： https://element-plus.gitee.io/zh-CN/guide/theming.html

参照官网上添加 sass 文件的方式没有修改成功，最后使用 css 的方式修改样式成功。

首先，添加一个新的 css 文件，如 style.css

在文件中添加代码，修改主题的样式：

:root {
  --el-color-primary:#279DB9;
}

然后，打开 main.js 文件，在 Element-Plus 默认的样式后面添加引用

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './styles/style.css'

3.Element-Plus 的选择框组件在聚焦时会出现黑边的问题

Element-Plus 学习笔记一

解决方案：添加以下样式

.el-popper:focus{
  outline: none !important;
}

4. 执行 npm run build 进行编译时，提示 “terser not found”错误

解决方案：安装 terser

npm i terser --legacy-peer-deps

文章来源地址https://www.toymoban.com/news/detail-635129.html

到了这里，关于Element-Plus 学习笔记一的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

Element-Plus 学习笔记一

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2