Element-Plus搭建CMS页面结构 引入第三方图标库iconfont(详细)

这篇具有很好参考价值的文章主要介绍了Element-Plus搭建CMS页面结构 引入第三方图标库iconfont(详细)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Element-Plus组件库使用

element plus组件库是由饿了么前端团队专门针对vue框架开发的组件库,专门用于电脑端网页的。因为里面集成了很多组件,所以使用他可以非常快速的帮我们实现网站的开发。

安装:

npm install element-plus --save

引入:
引入的时候也是分成两种,一种是全部引入,一种是按需引入。

一、完整引入:

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

二、局部引入:
首先需要安装unplugin-vue-components。

npm install unplugin-vue-components
  1. 配置:
    在vue.config.js中添加以下配置:
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-vue-components/webpack')({ /* options */ }),
    ],
  },
}
  1. 使用:
    然后在项目中可以进行使用了。先进行导入,然后进行组件注册,最后再使用:

首页模板可以直接使用

<template>
  <div class="frame">
    <el-container class="frame-container">
      <el-header class="header">
        <a href="/" class="brand"><strong>知了</strong>管理系统</a>
        <div class="header-content">
          <div class="greet">欢迎,周杰伦</div>
          <div class="signout">回到首页</div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" class="aside">
          <el-row class="menu-row">
            <el-col :span="24">
              <el-menu
                default-active="1"
                background-color="#545c64"
                active-text-color="#fff"
                text-color="#ddd"
              >
                <el-menu-item index="1">
                  <template #title>
                    <el-icon><house /> </el-icon>
                    <span>首页</span>
                  </template>
                </el-menu-item>

                <el-menu-item index="2">
                  <template #title>
                    <el-icon><PictureRounded /></el-icon>
                    <span>轮播图</span>
                  </template>
                </el-menu-item>

                <el-menu-item index="3">
                  <template #title>
                    <el-icon><Postcard /></el-icon>
                    <span>帖子管理</span>
                  </template>
                </el-menu-item>

                <el-menu-item index="4">
                  <template #title>
                    <el-icon><Comment /></el-icon>
                    <span>评论管理</span>
                  </template>
                </el-menu-item>

                <el-menu-item index="5">
                  <template #title>
                    <el-icon><User /></el-icon>
                    <span>用户管理</span>
                  </template>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-container>
          <el-main class="main"> 这里放网页内容部分 </el-main>
          <el-footer class="footer">这是Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {House,PictureRounded,Postcard,Comment,User} from "@element-plus/icons-vue"

export default {
  name: "App",
  components:{
    House,
    PictureRounded,
    Postcard,
    Comment,
    User
  }

};
</script>

<style scoped>
.frame-container {
  height: 100vh;
}
.header {
  height: 60px;
  background: #00a65a;
  display: flex;
}

.header .brand {
  width: 200px;
  margin-left: -20px;
  background-color: #008d4c;
  font-size: 20px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header .header-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 20px;
  color: #fff;
}

.header-content .signout {
  cursor: pointer;
}

.aside {
  background-color: #545c64;
}

.aside .el-menu .is-active {
  background-color: #434a50 !important;
}

.footer {
  background: gray;
}
</style>

<style scoped>
.el-menu {
  border-right: none;
}
</style>

<style>
* {
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: none;
  vertical-align: baseline;
}
</style>

Element-Plus搭建CMS页面结构 引入第三方图标库iconfont(详细),element-ui,elementui

如果elementui中的图标没有你想要的可以使用其它第三方的

示例
阿里巴巴图标库

搜索你需要的图标
Element-Plus搭建CMS页面结构 引入第三方图标库iconfont(详细),element-ui,elementui

Element-Plus搭建CMS页面结构 引入第三方图标库iconfont(详细),element-ui,elementui

Element-Plus搭建CMS页面结构 引入第三方图标库iconfont(详细),element-ui,elementui

Element-Plus搭建CMS页面结构 引入第三方图标库iconfont(详细),element-ui,elementui

Element-Plus搭建CMS页面结构 引入第三方图标库iconfont(详细),element-ui,elementui

因为图标需要在整个项目的任意地方使用,可以在public/index.html 中加载
Element-Plus搭建CMS页面结构 引入第三方图标库iconfont(详细),element-ui,elementui

Element-Plus搭建CMS页面结构 引入第三方图标库iconfont(详细),element-ui,elementui

在需要使用的地方引入

Element-Plus搭建CMS页面结构 引入第三方图标库iconfont(详细),element-ui,elementui
注意:class=“iconfont” 是固定写法 后面跟那边复制的代码

效果
Element-Plus搭建CMS页面结构 引入第三方图标库iconfont(详细),element-ui,elementui文章来源地址https://www.toymoban.com/news/detail-558520.html

到了这里,关于Element-Plus搭建CMS页面结构 引入第三方图标库iconfont(详细)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3.0正确引入Element UI组件的正确姿势 (Element-plus)

    1命令引入参照官方文档:https://element.eleme.cn/#/zh-CN/component/installation npm i element-ui -S main.js中引入 报错后 看官方文档 发现vue3已经不支持原来的饿了么ui了 需要使用与vue3适配的Element-plus 官网说明 :https://element-plus.gitee.io/#/zh-CN/component/installation 这次是得注意安装 element-plus 最后

    2024年02月13日
    浏览(53)
  • Vue3+Vite项目引入Element-plus并配置按需自动导入

    我使用的是 pnpm ,并且顺便将 element-plus/icons 一起引入 如果您使用 Volar,请在根目录下 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型 3.1 首先你需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件 3.2 然后把下列代码插入到根目录下 vite.config.ts 文件中 Element-lus官

    2024年02月13日
    浏览(63)
  • Vue3自动引入组件(unplugin-auto-import和element-plus)

    在使用 Vue3 开发项目时,我们经常需要引入多个组件,但是每次手动引入非常麻烦,容易出错。为了解决这个问题,我们可以使用 unplugin-auto-import 插件自动引入组件,提高开发效率。本篇博客将详细介绍如何在 Vue3 项目中使用 unplugin-auto-import 插件。 首先,在项目中安装 un

    2024年02月13日
    浏览(48)
  • 记录-解决element-plus自动引入后ElLoading、ElMessage、ElNotification、ElMessageBox样式丢失的问题

    vue3项目中使用element-plus自动引入遇到ElLoading、ElMessage、ElNotification、ElMessageBox样式丢失的问题。 废话少说,以ElLoading为例,下面是使用的代码片段: 打印了一下 ElLoading 是否正常导入,发现是没问题的。 然后F12看了一下样式,发现class正常插入,但是没样式,也就是样式丢了

    2024年02月16日
    浏览(79)
  • 【Vue+Element-plus】记录后台首页多echart图静态页面

     Index.vue  DataComparison.vue DateTime.vue HealPatient.vue PeopleNumber.vur TrackPatients.vue VisitsNumber.vue

    2024年02月13日
    浏览(40)
  • 在Django+Vue3+GraphQL的Blog例子代码中引入Element-Plus UI Framework

    Vue3的UI Framework中有Element-Plus、BalmUI、Quasar、PrimeVue、Ant Design Vue等UI Framework. Element-Plus是Element-UI的Vue3版,Element-UI的使用人数的基数较大,Github上的Star数也较多,就选择了Element-Plus作为这个Blog项目的UI Framework. UI Framework的好处就是提供了相较裸Html+CSS开发起来更好看和方便一些.

    2023年04月13日
    浏览(40)
  • Vue3+element-plus 后台管理系统(含登陆注册功能页面)

    最近在学习Vue3,记录一下自己从0开始搭建后台框架,并获取远程接口数据对页面的渲染 本次功能实现主要包括:连接后端的远程接口数据进行登录注册功能实现 : 1.本次登陆注册合并为了一个页面,页面都使用了element-plus中的组件渲染,更加美观 2.用route路由实现不同页面逻辑跳

    2023年04月26日
    浏览(54)
  • vue3 vue.config.js配置Element-plus组件和Icon图标实现按需自动引入

    打包时,报警告,提示包太大会影响性能 在页面直接使用,直接使用 SVG 图标,当做一般的 svg 使用 icon使用时需要用以下两种方式方式: 如果用在el-button里面的icon属性上使用,用SVG方式无效,还是需要引入再使用(不知道有没有其他方式) 注意: 使用 :icon=\\\"Edit\\\" 则icon的大

    2024年02月06日
    浏览(64)
  • vue3项目搭建并配置element-plus

    安装完成后,输入如下指令查看vue的版本: 选择一个要存放项目的目录,打开小黑窗输入如下命令: 一开始输入项目名称或者默认vue-project,然后根据需求选择Yes/No 生成完项目后,输入如下指令: src/main.js里引入 index.css的文件位置根据实际情况写,也有可能是 const app后面加

    2024年02月13日
    浏览(58)
  • html中如何用vue语法,并使用UI组件库 ,html中引入vue+ant-design-vue或者vue+element-plus

    前言 先说一下本次应用的场景,本次项目中,需要引入github中别人写好的插件,插件比较大,没有方法直接在自己项目中,把别人的项目打包合并生成html(类似于前端项目打包生成的 dist ),修改这里面的html,这种情况要么用原生js写或者jquery还相对快一些,那为什么不直

    2024年02月10日
    浏览(48)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

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

二维码1

领取红包

二维码2

领红包