5.11 Vue配置Element UI框架

news2024/11/26 11:46:31

Vue配置Element UI框架

  • 目录
    • 一、 概要
    • 二、 开发前准备
      • 1. 搭建Vue框架
    • 三、 安装 Element UI
      • 1. 引入 Element UI 依赖
      • 2. 在 main.js 中引入 Element UI 和相关样式：
      • 3. 按需引入(非必须, 可忽略)
      • 4. 简单构建一个主页面

目录

一、 概要

Element UI 是一个基于 Vue.js 的前端 UI 框架，提供了一套优雅的组件库和丰富的功能，用于快速搭建现代化的 Web 应用程序。Element UI 的设计灵感来源于 Google Material Design 和 Apple 的 Human Interface Guidelines，具有简洁明了的风格和丰富的组件，包括按钮、表单、弹窗、导航菜单、表格等常用组件，同时支持自定义主题和国际化。Element UI 的特点包括易用性、美观性和扩展性，广泛应用于各种 Web 项目中。

官方网址: Element

在这里插入图片描述

二、 开发前准备

1. 搭建Vue框架

Vue框架搭建详细参考这篇文章：

5.9 使用Vue CLI创建VUE项目

vue create element_demo

cd element_demo

npm run serve

在这里插入图片描述

在这里插入图片描述

三、 安装 Element UI

1. 引入 Element UI 依赖

可以通过 npm 或者 yarn 安装 Element UI：
npm install element-ui
#或者
yarn add element-ui

# 终端键入
npm install element-ui --save

安装后，package.json会同步追加element-ui依赖。
在这里插入图片描述

代码比较：
在这里插入图片描述

2. 在 main.js 中引入 Element UI 和相关样式：

\element_demo\src\main.js

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(ElementUI);

new Vue({
  render: h => h(App),
}).$mount('#app')

在这里插入图片描述

代码比较：
在这里插入图片描述

3. 按需引入(非必须, 可忽略)

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

babel-plugin-component 是一个 Babel 插件，用于按需引入 Vue.js 组件库（比如 Element UI、Ant Design Vue 等）。这个插件可以帮助你在使用 Vue.js 组件库时，只引入你实际需要的组件，而不是全部组件，从而减小最终打包生成的文件大小。

当你使用 babel-plugin-component 时，你可以在代码中按需引入组件，而不需要手动引入每个组件。这样可以提高项目的性能并减小最终打包文件的体积。

举个例子，假设你使用 Element UI，并且只需要引入 Button 和 Input 组件，你可以这样配置 babel-plugin-component：

# 使用 npm 安装 babel-plugin-component
npm install babel-plugin-component --save
# 或者使用 yarn 安装：
yarn add babel-plugin-component

在 babel.config.js 中添加如下配置：

\element_demo\babel.config.js

// babel.config.js
module.exports = {
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk",
        // 引入需要的组件
        components: ['Button', 'Input']
      }
    ]
  ]
};

在 Vue 组件的模板中使用 ‘Button’ 和 ‘Input’ 组件：

无需在脚本部分额外引入 Element UI 的 Button 和 Input 组件，因为这些组件已经被按需引入并注册到全局。

<template>
  <div>
    <!-- 使用 Button 组件 -->
    <el-button type="primary">Primary Button</el-button>

    <!-- 使用 Input 组件 -->
    <el-input placeholder="请输入内容"></el-input>
  </div>
</template>

<script>
// 由于已经按需引入组件，此处无需再单独引入 Element UI 的 Button 和 Input 组件
export default {
  name: 'MyComponent'
};
</script>

以上步骤可参照官方文档： 快速上手

4. 简单构建一个主页面

\element_demo\src\App.vue

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

<style>
body {
  height: 100vh; /* 设置高度为视口高度 */
  /* 100vh 是 CSS 中的一个长度单位，表示视口（Viewport）的高度。
  具体来说，1vh 等于视口高度的 1%。因此，100vh 就等于视口的整个高度。
  这个单位通常用于确保元素的高度始终占据整个视口高度，从而实现全屏效果。 */
  overflow: hidden; /* 隐藏滚动条 */
}
</style>

在这里插入图片描述

代码比较：

在这里插入图片描述

\element_demo\src\components\HelloWorld.vue

<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '3']">
        <el-submenu index="1">
          <template slot="title"
            ><i class="el-icon-message"></i>导航一</template
          >
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>导航二</template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"
            ><i class="el-icon-setting"></i>导航三</template
          >
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="3-1">选项1</el-menu-item>
            <el-menu-item index="3-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="3-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="3-4">
            <template slot="title">选项4</template>
            <el-menu-item index="3-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>ibun.song</span>
      </el-header>

      <el-main>
        <el-table :data="tableData">
          <el-table-column prop="date" label="日期" width="140">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    const item = {
      date: "9999-12-12",
      name: "ibun.song",
      address: "上海市普陀区金沙江路 1518 弄",
    };
    return {
      tableData: Array(15).fill(item),
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

在这里插入图片描述

代码比较：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

以上步骤可参照官方文档： Container 布局容器

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1561221.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【算法】01背包问题（代码+详解+练习题）

【算法】01背包问题（代码+详解+练习题）

题目&#xff1a; 有 N 件物品和一个容量是 V 的背包。每件物品只能使用一次。 第 i 件物品的体积是 vi&#xff0c;价值是 wi。 求解将哪些物品装入背包&#xff0c;可使这些物品的总体积不超过背包容量&#xff0c;且总价值最大。 输出最大价值。 输入格式 第一行两个整…
阅读更多...
代码随想录算法训练营第二十七天|131.分割回文串、93.复原IP地址

代码随想录算法训练营第二十七天|131.分割回文串、93.复原IP地址

文档链接&#xff1a;https://programmercarl.com/ LeetCode131.分割回文串 题目链接&#xff1a;https://leetcode.cn/problems/palindrome-partitioning/ 思路&#xff1a;把回溯的树画出来就好很多。startIndex用来控制切割的位置 例如对于字符串abcdef&#xff1a; 组…
阅读更多...
【T5模型源码】深入T5模型：源码解析与实现细节

【T5模型源码】深入T5模型：源码解析与实现细节

【T5模型源码】深入T5模型&#xff1a;源码解析与实现细节 文章脉络 模型结构图 类关系分析 简单类的源码 T5LayerNorm T5DenseActDense T5DenseGatedActDense T5LayerFF 复杂类的源码 常见参数介绍 最难的T5Attention源码 常见面试提问 总结 我们在日常业务中可能…
阅读更多...
上传本地项目到gitee仓库（简单快速）

上传本地项目到gitee仓库（简单快速）

目录 前提准备 1.已经下载好git Bash 2.已经注册好gitee账号 3.在gitee上新建一个仓库 上传项目到gitee 1.找到本地需要传的文件目录 2.在本页面右键空白处&#xff0c;点击Git Bash Here 3.检查gitee账号是否存在或是否正确 4.若不正确或不存在则配置用户名和邮箱 5…
阅读更多...
Matlab|【核心复现】同时考虑考虑孤岛与重构的配电网故障恢复运行策略

Matlab|【核心复现】同时考虑考虑孤岛与重构的配电网故障恢复运行策略

目录 主要内容 基本知识 1.问题引出 2.可控负荷 3.网络拓扑约束 4.算法流程 结果一览 1.原文结果 2.程序运行结果 下载链接 主要内容 该模型复现文章《同时考虑考虑孤岛与重构的配电网故障恢复运行策略》&#xff0c;以IEEE33配电网为分析对象&#xff0c;…
阅读更多...
OceanMind海睿思数据工程2.0重磅发布，赋能企业“韧性”成长！

OceanMind海睿思数据工程2.0重磅发布，赋能企业“韧性”成长！

近日&#xff0c;由江苏省工业和信息化厅指导&#xff0c;江苏省企业信息化协会主办的 2024制造业数字化转型南京高峰论坛 圆满落幕。 中新赛克海睿思 作为长三角地区数字化转型优秀厂商代表受邀参会&#xff0c;并发布全新数据工程系列产品。中新赛克副总兼大数据产品线总经理…
阅读更多...
python print用法

python print用法

1.输出字符串换行 输出结果会换行&#xff0c;默认自带换行 print(111) print(0) 2.末尾插入字符串或去除换行 末尾只能插入字符串&#xff0c;不能是其他类型 print(111,end0) print(0) 3.变量&#xff0c;字符串混合输入 没有必要什么都学&#xff0c;好用的常用的学一…
阅读更多...
设计定时任务实现数据同步的最佳实践

设计定时任务实现数据同步的最佳实践

✨✨ 祝屏幕前的您天天开心&#xff0c;每天都有好运相伴。我们一起加油&#xff01;✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; 目录 引言 一、选择合适的定时任务框架 Quartz Spring 的 TaskScheduler JDK 的 ScheduledE…
阅读更多...
记录何凯明在MIT的第一堂课：神经网络发展史

记录何凯明在MIT的第一堂课：神经网络发展史

https://www.youtube.com/watch?vZ5qJ9IxSuKo 目录 表征学习 主要特点&#xff1a; 方法和技术&#xff1a; LeNet 全连接层​ 主要特点&#xff1a; 主要特点&#xff1a; 网络结构&#xff1a; AlexNet 主要特点&#xff1a; 网络结构&#xff1a; Sigmoid Re…
阅读更多...
SDWebImage源码解析---疑难问题解答

SDWebImage源码解析---疑难问题解答

SDWebImage的简单流程图&#xff1a; 上图大致流程是对的&#xff0c;有几个没写到的地方&#xff1a; 加载沙盒中对应的图片后&#xff0c;不仅要显示&#xff0c;而且要把图片缓存到内存中下载完毕后&#xff0c;有一个异步解码的过程&#xff0c;没体现出来 网上有大佬做了…
阅读更多...
【JAVASE】学习数组的定义与使用

【JAVASE】学习数组的定义与使用

✅作者简介&#xff1a;大家好&#xff0c;我是橘橙黄又青&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a; 再无B&#xff5e;U&#xff5e;G-CSDN博客 目标&#xff1a; 1. 理解数组基本概念 2. 掌握数组的基本用法…
阅读更多...
腾讯云函数计算技术：云原生架构下的Serverless与微服务新篇章

腾讯云函数计算技术：云原生架构下的Serverless与微服务新篇章

作者&#xff1a;哈哥撩编程&#xff08;视频号、公众号、抖音同名&#xff09; 新星计划全栈领域优秀创作者博客专家全国博客之星第四名超级个体COC上海社区主理人特约讲师谷歌亚马逊演讲嘉宾科技博主极星会首批签约作者 文章目录 前言全面上云之首战&#xff1a;春保&#…
阅读更多...
探索DAPP生态：代币预售、系统开发、NFT质押分红和代币质押技术

探索DAPP生态：代币预售、系统开发、NFT质押分红和代币质押技术

随着区块链技术的迅速发展&#xff0c;去中心化应用程序&#xff08;DAPPs&#xff09;生态系统已经成为了数字经济的一部分&#xff0c;并在不断壮大和发展。DAPP生态系统的繁荣离不开代币预售、系统开发、NFT质押分红和代币质押技术等关键要素的支持和推动。本文将深入探讨这…
阅读更多...
热门IT【视频教程】-华为/思科/红帽/oracle

热门IT【视频教程】-华为/思科/红帽/oracle

华为认证 网络工程师-入门基础课&#xff1a;华为HCIA认证课程介绍-CSDN博客 网络工程师进阶课&#xff1a;华为HCIP认证课程介绍-CSDN博客 职场进阶&#xff0c;踏上高峰——HCIE-Datacom认证-CSDN博客 华为HCIA试听课程 &#xff1a; 超级实用&#xff0c;华为VRP系统文件…
阅读更多...
算法——距离计算

算法——距离计算

距离计算常用的算法包括欧氏距离、曼哈顿距离、切比雪夫距离、闵可夫斯基距离、余弦相似度等。这些算法在数据挖掘、机器学习和模式识别等领域中被广泛应用。 1.欧氏距离 欧式距离也称欧几里得距离&#xff0c;是最常见的距离度量&#xff0c;衡量的是多维空间中两个点之间的…
阅读更多...
【LeetCode】三月题解

【LeetCode】三月题解

文章目录 [2369. 检查数组是否存在有效划分](https://leetcode.cn/problems/check-if-there-is-a-valid-partition-for-the-array/)思路&#xff1a;代码&#xff1a; [1976. 到达目的地的方案数](https://leetcode.cn/problems/number-of-ways-to-arrive-at-destination/) 思路…
阅读更多...
lua脚本在redis集群中哈希槽分片问题

lua脚本在redis集群中哈希槽分片问题

上文说到&#xff0c;通过用redis lua脚本实现时间窗分布式限流 可以操作redis lua脚本来实现时间窗限流&#xff0c;在执行lua脚本的时候&#xff0c;参数中有个keys列表&#xff0c;当lua脚本中如果有操作多个key的情况&#xff0c;就可以传个key列表了。通常情况下&#xff…
阅读更多...
[蓝桥杯 2019 省赛 AB] 完全二叉树的权值

[蓝桥杯 2019 省赛 AB] 完全二叉树的权值

# [蓝桥杯 2019 省 AB] 完全二叉树的权值 ## 题目描述 给定一棵包含 $N$ 个节点的完全二叉树&#xff0c;树上每个节点都有一个权值&#xff0c;按从上到下、从左到右的顺序依次是 $A_1,A_2, \cdots A_N$&#xff0c;如下图所示&#xff1a; 现在小明要把相同深度的节点的权值…
阅读更多...
【Windows】windows的bat命令获取当前文件名称

【Windows】windows的bat命令获取当前文件名称

新建.txt文本输入IR *.* /B >LIST.TXT LIST.TXT 提取到LIST.TXT文件 重命名txt文本后缀为.bat双击.bat文件 DIR *.* /B >LIST.TXT效果图
阅读更多...
git学习——tags、release、drop commit

git学习——tags、release、drop commit

最近一直都在持续学习git相关内容&#xff0c;越来越发现git是一个十分适合大型项目和团队协作进行开发的工具&#xff0c;掌握好了对于我们参与项目维护和开发产品帮助很大&#xff0c;所以要不断持续学习git。 tags & releases tag的创建 当我们在git版本控制中遇到了…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023