首页 > 其他分享 >Vue入门到关门之第三方框架elementui

Vue入门到关门之第三方框架elementui

时间：2024-05-02 21:22:21浏览次数：22  
标签：Vue 入门 ElementUI elementui Element UI background 组件

1、什么是ElementUI？

Element UI 是一个基于 Vue.js 的组件库，它提供了丰富的 UI 组件和一套完整的解决方案，用于快速构建现代化的 Web 应用程序。Element UI 的目标是帮助开发者快速构建出美观、易用的界面，并提供了丰富的组件，包括但不限于按钮、表单、表格、对话框、菜单、导航、布局等等。

Element UI 的特点包括：

  1. 丰富的组件: Element UI 提供了大量的常用 UI 组件，开发者可以通过简单的引入和配置，快速构建出符合现代界面设计的 Web 应用。

  2. 易用性: 组件设计符合用户习惯，提供了丰富的交互细节和动画效果，使得开发者可以轻松地构建出用户友好的界面。

  3. 响应式设计: Element UI 的组件支持响应式设计，能够适应不同尺寸的屏幕，从而提供良好的移动端和桌面端用户体验。

  4. 主题定制: Element UI 提供了灵活的主题定制功能，开发者可以根据自己的需求定制组件的外观和风格。

总的来说，Element UI 是一个功能丰富、易用且灵活的 Vue.js 组件库，为开发者提供了丰富的工具和组件，帮助他们快速构建出现代化的 Web 应用程序。

2、Element UI的官方网站

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

3、Element UI的使用

（1）安装

在Vue项目中使用ElementUI，需要进行以下配置步骤：

  • 在项目中安装

    cnpm install element-ui -S

（2）项目中配置

在main.js配置：

  • 导入ElementUI对象：
    • 使用import ElementUI from 'element-ui'将ElementUI对象引入。
  • 引入ElementUI样式：
    • 使用import 'element-ui/lib/theme-chalk/index.css'引入ElementUI的样式。
// 导入ElementUI对象
import ElementUI from 'element-ui';       
// 引入ElementUI样式
import 'element-ui/lib/theme-chalk/index.css';

  • 注册ElementUI组件：

    • 在main.js文件中，通过Vue.use(ElementUI)全局注册ElementUI组件，并使其可在所有的Vue组件中使用。
    Vue.use(ElementUI)

这样配置完成后，就可以在项目中直接使用ElementUI提供的组件和样式了。如果在其他组件中看到了喜欢的ElementUI的样式效果，可以直接复制相关的HTML、CSS和JavaScript代码来使用。

（3）使用

示例：

<template>
  <div class="Element">
    <h1>栅格</h1>
    <el-row :gutter="20">
      <el-col :span="16"><div class="left"></div></el-col>
      <el-col :span="8"><div class="right"></div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6"><div class="center"></div></el-col>
    </el-row>

    <h2>布局容器</h2>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>

    <h1>小图标</h1>
    <span class="el-icon-video-camera">打开摄像机</span>

    <h1>按钮</h1>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row>

    <h1>链接文字</h1>
    <div>
      <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
      <br>
      <el-link type="primary">主要链接</el-link>
      <el-link type="success">成功链接</el-link>
      <el-link type="warning">警告链接</el-link>
      <el-link type="danger">危险链接</el-link>
      <el-link type="info">信息链接</el-link>
    </div>


    <h1>单选</h1>
    <div>
      <el-radio-group v-model="radio1">
        <el-radio-button :label="item" v-for="item in citys" border="false"></el-radio-button>
      </el-radio-group>
    </div>

    <h1>多选</h1>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
    </el-checkbox-group>

    <h1>input框</h1>
    <div class="demo-input-suffix">
      属性方式：
      <el-input
          placeholder="请选择日期"
          suffix-icon="el-icon-date">
      </el-input>
      <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search">
      </el-input>
    </div>
    <div class="demo-input-suffix">
      slot 方式：
      <el-input
          placeholder="请选择日期">
        <i slot="suffix" class="el-input__icon el-icon-date"></i>
      </el-input>
      <el-input
          placeholder="请输入内容">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>

    <h1>表格</h1>
    <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
    </el-table>

    <h1>message提示</h1>
    <el-button :plain="true" @click="open4">错误</el-button>
    <h1>警告</h1>
    <el-button :plain="true" @click="open">错误</el-button>


  </div>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
  name: 'Element',
  data(){
    return {
      // citys:['上海','北京','天剑'],
      // radio1:'上海',

      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
  methods:{
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    open4(){
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success'
      });
    },
    open() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }

}
</script>

<style scoped>
.left{
  background-color: aqua;
  height: 200px;
}
.right{
  background-color: pink;
  height: 200px;
}
.center{
  background-color: green;
  height: 200px;
}

.el-header{
  height: 50px;
  background-color: rebeccapurple;
}
.el-aside{
  height: 700px;
  background-color: aquamarine;
}
.el-main{
  height: 500px;
  background-color: #67C23A;
}
.el-footer{
  height: 200px;
  background-color: blue;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

4、总结

(1) 安装：cnpm i element-ui -S
(2) 集成到项目：main.js 中加入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); // 使用插件
(3) 去官网，找样式，复制，粘贴

标签：Vue,入门,ElementUI,elementui,Element,UI,background,组件
From： https://www.cnblogs.com/xiao01/p/18170591

相关文章

  • Vue入门到关门之Vue项目工程化
    一、创建Vue项目1、安装node环境官网下载，无脑下一步，注意别放c盘就行Node.js—RunJavaScriptEverywhere(nodejs.org)需要两个命令npm---->pipnode--->python装完检查一下，helloworld检测，退出crtl+c2、搭建vue项目环境装cnpm这个包，下载东西会快很多，装模块......
  • VUE
    VUE（1）介绍VUE是渐进式框架可以一点一点地使用它，只用一部分，也可以整个工程都使用它Vue特点易用通过HTML、CSS、JavaScript构建应用灵活不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。高效20kBmin+gzip运行大小超快虚拟DOM最省心的优化（2）引入vu......
  • JEMSPath 入门
    JMESPath是一种查询语言，专门用于处理JSON对象。JMESPath规则和基本语法包括：字段访问:使用点.来访问JSON对象中的字段。例如，obj1.obj2.key。索引列表:通过索引来访问列表中的元素。索引是基于零的，例如arr1[0].arr2[0].key。管道表达式(|):用于将一个表达式......
  • Vue package-lock.json的作用
    package-lock.json的作用 "node_modules/@aashutoshrathi/word-wrap":{"version":"1.2.6","resolved":"https://registry.npmmirror.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",&......
  • 前端 Vue webpack配置之 webpack.config.js 文件配置
     Webpack在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个node.js模块，返回一个json格式的配置信息对象，或者通过 --config 选项来指定配置文件。.输入命令：webpack，即可按照webpack.c......
  • 前端 Vue-cli中 vue.config.js 的配置详解
    Vue-cli3/Vue-cli4 目录结构├──README.md #说明|--dist #打包后文件夹├──babel.config.js #babel语法编译├──package-lock.json├──public #静态文件夹,这类资源将会直接被拷贝，而不会经过webpack的......
  • 前端 Vue yarn.lock文件：详解和使用指南
    yarn.lock文件：详解和使用指南https://www.python100.com/html/38KF796X6BHM.html一、什么是yarn.lock文件yarn.lock文件是一个产生于Yarn0.22及以后版本的文件，它是一个自动生成的锁文件，记录了当前项目的依赖关系，并确保每个依赖的版本都是稳定的，这样可以保证软件包安装的重......
  • elementui使用
      1#1开源的样式库，方便在vue中使用2-elementui：饿了么团队开源的web端3https://element.eleme.cn/#/zh-CN4-vant：有赞团队，移动端5https://vant-ui.github.io/vant/#/zh-CN6-antdesign:阿里团队7https://1x.antd......
  • vite vue-cli 读取文件原始内容 使用base64内容的文件
    新建文件img.dataurl中存放图片base64<imgclass='img':src='dataurl'alt=''/>importdataurlfrom'./img.dataurl'data(){return{dataurl:dataurl}}vue.config.jsmodule.exports=defineConfig({configureWebpack:{......
  • 1. SpringBoot 入门
    1.SpringBoot简介SpringBoot是由Pivotal团队提供的全新框架，可以帮助我们开发基于Spring的、独立的、生产级的应用程序。​其中SpringBoot的官网是：SpringBootReferenceDocumentationSpringBoot的主要目标是：为所有Spring开发提供更快的入门体验开箱即用，提供了自动配......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99