5.11 Vue配置Element UI框架

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 布局容器

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

安卓Termux系统安装MariaDB结合内网穿透实现公网连接本地数据库

安卓Termux系统安装MariaDB结合内网穿透实现公网连接本地数据库

文章目录 前言1.安装MariaDB2.安装cpolar内网穿透工具3. 创建安全隧道映射mysql4. 公网远程连接5. 固定远程连接地址 前言 Android作为移动设备&#xff0c;尽管最初并非设计为服务器&#xff0c;但是随着技术的进步我们可以将Android配置为生产力工具&#xff0c;变成一个随身…
阅读更多...
SSM框架学习——Spring事务管理

SSM框架学习——Spring事务管理

Spring事务管理 概念 事务&#xff08;Transaction&#xff09;是访问并可能操作各种数据项的一个数据库操作序列&#xff0c;这些操作要么全部执行&#xff0c;要么都不执行&#xff0c;是一个不可分割的工作单元。 事务有如下特性&#xff1a; 原子性隔离性一致性持久性 …
阅读更多...
116. 飞行员兄弟（递推+暴力）太难了不要求

116. 飞行员兄弟（递推+暴力）太难了不要求

输入样例&#xff1a; --- ---- ---- ---输出样例&#xff1a; 6 1 1 1 3 1 4 4 1 4 3 4 4 代码&#xff1a; #include<algorithm> #include<iostream> #include<cstring> #include<queue> #include<cmath> #define x first #define y second…
阅读更多...
往word表格插入图片，表格大小如何不变形？

往word表格插入图片，表格大小如何不变形？

在word中进行大量图片排版时&#xff0c;往往会用到表格。然而在往word表格插入图片的过程中&#xff0c;表格往往会随图片大小自适应变化&#xff0c;如何保证图片自适应表格大小&#xff08;即图片按照所给定的表格大小自动缩放&#xff09;&#xff0c;解决方法如下&#xf…
阅读更多...
小红书运营快捷回复工具

小红书运营快捷回复工具

小红书作为一个热门的社交电商平台&#xff0c;吸引了众多品牌和个人用户进行运营和互动。而很多做小红书运营的姐妹&#xff0c;经常会有回评论懒得打字的困扰&#xff0c;为了提高回复评论和私信的效率&#xff0c;本文给大家推荐一款快捷回复工具&#xff0c;手机电脑都能用…
阅读更多...
【Python使用】嘿马头条完整开发md笔记第3篇：数据库,1 新增【附代码文档】

【Python使用】嘿马头条完整开发md笔记第3篇：数据库,1 新增【附代码文档】

嘿马头条项目从到完整开发笔记总结完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;课程简介&#xff0c;ToutiaoWeb虚拟机使用说明1 产品介绍,2 原型图与UI图,3 技术架构,4 开发,1 需求,2 注意事项。数据库&#xff0c;理解ORM1 简介,2 安装,3 数据库连接…
阅读更多...
电商新手选品易犯6大通病，85%的人都踩过雷！

电商新手选品易犯6大通病，85%的人都踩过雷！

电商选品是一个复杂而关键的过程&#xff0c;需要综合考虑多种因素&#xff0c;尤其对于刚刚涉猎电商行业的新手来更有难度&#xff0c;许多电商新手在选品过程中都会犯一些通病&#xff0c;以下是一些常见的电商选品通病以及调整建议&#xff0c;希望对大家有所帮助&#xff1…
阅读更多...
《第一行代码 Android 第三版》 天气预报APP SunnyWeather——交作业

《第一行代码 Android 第三版》 天气预报APP SunnyWeather——交作业

跟着书本手敲一遍kotlin项目SunnyWeather,MVVM架构&#xff1a; 没啥难度&#xff0c;就是熟悉kotlin... github链接&#xff1a;SunnyWeather/app at master xda1212/SunnyWeather GitHub
阅读更多...
Vivado Lab Edition

Vivado Lab Edition

Vivado Lab Edition 是完整版 Vivado Design Suite 的独立安装版本 &#xff0c; 包含在生成比特流后对赛灵思 FPGA 进行编程和 调试所需的所有功能。通常适用于在如下实验室环境内进行编程和调试&#xff1a; 实验室环境中的机器所含磁盘空间、内存和连 接资源较少。Vivad…
阅读更多...
【环境搭建】（四）ubuntu22.04系统安装Opencv4.8.0+Opencv-contrib4.8.0

【环境搭建】（四）ubuntu22.04系统安装Opencv4.8.0+Opencv-contrib4.8.0

一个愿意伫立在巨人肩膀上的农民...... 一、安装下载所需工具 1.打开终端&#xff0c;输入以下命令来更新软件源&#xff1a; sudo apt-get update 2.安装wget&#xff1a; sudo apt-get install wget 3.下载opencv和opencv-contrib包&#xff1a; wget -O opencv-4.8.0.…
阅读更多...
备忘录软件哪款可以加密？备忘录app怎么加密？

备忘录软件哪款可以加密？备忘录app怎么加密？

在快节奏的现代生活中&#xff0c;备忘录软件已成为我们不可或缺的助手。它不仅能方便我们随时记录任务事项&#xff0c;捕捉生活中的灵感&#xff0c;还便于我们随时修改和查看记录内容&#xff0c;实用性极高。然而&#xff0c;随着记录内容的增多&#xff0c;数据安全性问题…
阅读更多...
【自动化测试】 环境部署和元素定位

【自动化测试】 环境部署和元素定位

写在前面 勤奋跟吃苦不一样&#xff0c;假如你对工作&#xff0c;生活不满意。就要跳出圈子&#xff0c;接触其它人或事物&#xff0c;提升自己。从而换个工作&#xff0c;或者换了心态看待问题。而不是&#xff0c;吃苦的加班逼着自己去内卷&#xff0c;卷来卷去觉得吃苦受累&…
阅读更多...
Leetcode 309. 买卖股票的最佳时机含冷冻期

Leetcode 309. 买卖股票的最佳时机含冷冻期

心路历程&#xff1a; 这道题的建模和股票问题一样&#xff0c;只不过需要在状态上增加一个处于冻结期&#xff1b; 状态&#xff1a;1第i天&#xff1b;2第i天持有股票的状态&#xff08;持有&#xff0c;不持有被冻结&#xff0c;不持有未被冻结&#xff09; 动作&#xff1…
阅读更多...
基于SpringBoot餐饮美食分享平台的设计与实现+毕业论文+毕业答辩PPT+搭建资料

基于SpringBoot餐饮美食分享平台的设计与实现+毕业论文+毕业答辩PPT+搭建资料

系列文章目录 本系统的用户可分为用户和管理员二个用户角色组成。管理员可以管理系统内所有功能&#xff0c;主要有系统首页、信息展示、用户信息管理、菜谱信息管理、笔记信息管理、美食信息管理、修改密码、退出登录管理、系统管理等功能&#xff1b;用户登录系统可以对个人…
阅读更多...
实体机双系统安装

实体机双系统安装

实体机双系统安装 第一步&#xff1a;下载openKylin镜像 前往官网下载x86_64的镜像&#xff08;https://www.openkylin.top/downloads/628-cn.html&#xff09; tips&#xff1a;下载完镜像文件后&#xff0c;请先检查文件MD5值是否和官网上的一致&#xff0c;如果不一致请重…
阅读更多...
如何给图片添加水印？

如何给图片添加水印？

如何给图片添加水印&#xff1f;在现代职场中&#xff0c;图片的使用已经成为了日常工作的一部分&#xff0c;而给图片添加水印也逐渐成为了一种常见的需求。无论是在设计、广告、营销还是其他领域&#xff0c;给工作中的图片加水印都有其重要性和实用性。工作中给图片加水印的…
阅读更多...
系统分析师-软件的知识产权保护与标准化

系统分析师-软件的知识产权保护与标准化

文章目录 前言一、知识产权保护范围与对象二、保护期限三、知识产权人确定四、侵权判定五、标准化标准的分类标准的编号 前言 知识产权也称为“智力成果权”、“智慧财产权”&#xff0c;它是人类通过创造性的智力劳动而获得的一项权利。根据我国民法通则的规定&#xff0c;知识…
阅读更多...
兑换码生成算法

兑换码生成算法

兑换码生成算法 兑换码生成算法1.兑换码的需求2.算法分析2.重兑校验算法3.防刷校验算法 3.算法实现 兑换码生成算法 兑换码生成通常涉及在特定场景下为用户提供特定产品或服务的权益或礼品&#xff0c;典型的应用场景包括优惠券、礼品卡、会员权益等。 1.兑换码的需求 要求如…
阅读更多...
IPv4地址

IPv4地址

IP v4 由32位二进制构成、可以用点分十进制表示。 例如&#xff1a;192.168.1.1 11000000101010000000000100000001 由网络位和主机位组成。为了区分网络位和主机位&#xff0c;需要用子网掩码&#xff0c;子网掩码也是由32位二进制构成&#xff0c;连续的1对应网络位&#…
阅读更多...
黑马鸿蒙笔记 4

黑马鸿蒙笔记 4

目录 17.ArkUI-状态管理-Observed和ObjectLink 18.ArkUI-页面路由 19.ArkUI-属性动画和显式动画 20.ArkUI-组件转场动画 17.ArkUI-状态管理-Observed和ObjectLink 这个task[],找到它的定义 在数据类型上加Observed 要把这一段单独抽取出来&#xff0c;才可以加ObjectLink&a…
阅读更多...
最新文章

Copyright @ 2022~2023